tableStyle样式问题

收藏

隔行变色问题
source:
var tableStyle = new GC.Spread.Sheets.Tables.TableTheme();
var thinBorder = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
var tStyleInfo = new GC.Spread.Sheets.Tables.TableStyle();
tStyleInfo.backColor ='#F0F3EF';
tStyleInfo.borderBottom = thinBorder;
tStyleInfo.borderLeft = thinBorder;
tStyleInfo.borderTop = thinBorder;
tStyleInfo.borderRight = thinBorder;
// tableStyle.firstRowStripSize();
tableStyle.firstRowStripStyle(tStyleInfo);
sheet.tables.add("Custom", 0, 0, 20, 19, tableStyle);

参考了求助中心的帖子后，
这样设置了之后，确实变色了，但是有问题
1：只显示了背景色和上下下边框。竖向的边框没有。
2：出现了筛选框，在数据的第一行。这个，我觉得不应该有。我把这一段删掉，就不会出筛选框。
3：整列数据为空的时候，它会在表格第一格填写column列数的数据。这个应该也不能有。

KevinChen · KevinChen

您好，

1、关于表格样式和单元格边框设置，您可以参考学习指南中关于表格样式设置与border的API，

SpreadJS自带了一些表格样式Themes，您可以设置不同的样式模板，也可以设置null来取消默认表格样式：

https://demo.grapecity.com.cn/Sp ... /#/demos/tableStyle

边框设置可以参考API：

http://help.grapecity.com/spread ... ange~setBorder.html

2、表格API可以查看：

http://help.grapecity.com/spread ... s.Tables.Table.html

其中filterButtonVisible 方法可以设置是否显示筛选按钮，showHeader 方法可以设置是否显示表头。

3、当dataSource中包含，且设置了table的绑定列时，就会出现对应的列头。

红衣 · 红衣

非常感谢。

KevinChen · KevinChen

不客气，本帖我结贴了。

红衣 · 红衣

KevinChen 发表于 2018-12-6 13:43
不客气，本帖我结贴了。

1：sheet.tables.add("Custom", 0, 0, 20, 19, tableStyle);
我用这句代码，删选框是在第一行数据。我是有表头区域的，如果我希望删选框在表头部分，该如何做？
2：我用了隔行变色，firstRowScriptStyle方法，可以隔行变色，变得是偶数行的颜色，我点击第一列的checkbox,整行变色，再点击，恢复原来的颜色。使用firstRowScriptStyle方法的那行，没有成功。应该如何做？

KevinChen · KevinChen

红衣发表于 2019-1-3 16:37
1：sheet.tables.add("Custom", 0, 0, 20, 19, tableStyle);
我用这句代码，删选框是在第一行数据。我是 ...

1、您是希望添加一个table，还是为了添加筛选而加的table？如果就是要table，那无法实现表头区域筛选，如果不添加table，可以参考学习指南：

https://demo.grapecity.com.cn/Sp ... /demos/filterDialog

注意是第二个表格。

2、请提供您的代码，能重现您描述的问题，我这边排查一下。

红衣 · 红衣

KevinChen 发表于 2019-1-3 18:26
1、您是希望添加一个table，还是为了添加筛选而加的table？如果就是要table，那无法实现表头区域筛选，如 ...

问题：
1：首先我有头部区域，很希望删选框是显示在头部。
2：我加了隔行变色，不知道为什么，隔行变色的边框线，在点击第一格checkbox，竖向的线才出来。
3：隔行变色后，点击第一个格子，状态一直是FALSE。。。我debug正常的那行变红的，是会true，false切换。
4：第一行数据行变红色，也是有问题的。变红之后，回不去。

KevinChen · KevinChen

您好：

1、关于列头筛选框，我加到你提供的示例中并添加了注释。

注意，您在SpreadJS中通过添加table的方式加了隔行变色的样式，

但table不能把筛选按钮放在表头区域，否则会导致筛选的部分功能不工作。

2、table的主题（Theme）中有自带样式，您在点击事件中创建了一个自定义的Style，

这样就会导致在点击checkbox时覆盖掉table的主题样式，从而出现这个边框线。

3、第一行是table的表头区域，表头在设置了列映射后，其中的值不能改变，

从而导致您无论怎么点击都不会改变单元格的值。

4、同理，表头样式与您自定义样式有冲突。

个人建议，如果您只做数据的表格绑定，把筛选框放到表头，而不是表单头部区域，

那么您可以使用table。

否则不要用table来实现您的需求，可以采用其它方式来实现隔行变色。

我在您提供的Demo中做了这方面的修改，您可以参考附件。

红衣 · 红衣

KevinChen 发表于 2019-1-4 14:58
您好：

1、关于列头筛选框，我加到你提供的示例中并添加了注释。

那隔行变色只能初期循环的时候做？数据量多的时候，会很慢吗？

KevinChen · KevinChen

红衣发表于 2019-1-4 17:13
那隔行变色只能初期循环的时候做？数据量多的时候，会很慢吗？

如果需要在刚加载就显示隔行变色效果，可以采用条件格式的方式添加，

代码如下：

window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
initSpread(spread);
};
function initSpread(spread) {
var style = new GC.Spread.Sheets.Style();
style.backColor = "red";
var ranges = [new GC.Spread.Sheets.Range(-1, -1, -1, -1)];
var activeSheet = spread.getActiveSheet();
activeSheet.conditionalFormats.addFormulaRule("=MOD(ROW(),2)=0", style, ranges);
}

复制代码

		自动登录	找回密码
密码			立即注册

[已处理] tableStyle样式问题

11 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章