SpreadJS在Sheet中实现过滤后始终显示交替行样式

收藏

本帖最后由 Richard.Ma 于 2022-7-11 09:57 编辑

在Gird或者Sheet表格中中展示大量的行数据，尤其是每条行数据本身比较类似，而列数很多需要拖动滚筒条时，如果每行的背景色相同，使用人员很容易找不到数据对应的具体是哪一行

交替行样式在这个时候可以让表格变的更加易读，因此很多Gird或者Sheet类的表格控件大都支持交替行样式设置

在spreadjs中，table表格本身提供了交替行样式，在给table中我们通过设置[size=1em]table.bandRows(true);即可给table设置交替行样式，且在过滤后样式仍然可以保持。

有时候，我们需要在sheet中也实现交替行样式，
我们可以在初始化事件中给sheet设置交替行样式：

let sheet = spread.getSheet(0);
for(var r=0;r<sheet.getRowCount();r++){
if(sheet.getRowVisible(r)){
i++;
if(i%2==0)
sheet.getRange(r,-1,1,-1).backColor('#EEEEF8');
else
sheet.getRange(r,-1,1,-1).backColor('white');
}
}

复制代码

设置后的效果如下

但是如果我们添加了行过滤器，在过滤后此前设置的交替行样式可能就没法保持了

此时，可以通过RangeFiltered事件，在每次筛选后重新设置样式，即可保持交替行样式

参考代码如下

sheet.bind(GC.Spread.Sheets.Events.RangeFiltered, function (e, info) {
let i=0;
for(r=0;r<sheet.getRowCount();r++){
console.log(sheet.getRowVisible(r));
if(sheet.getRowVisible(r)){
i++;
if(i%2==0)
sheet.getRange(r,-1,1,-1).backColor('lightseagreen');
else
sheet.getRange(r,-1,1,-1).backColor('white');
}
}
});

复制代码

设置后的效果

值得注意的是，交替行样式实质上是直接设置的单元格背景色，因此如果是载入了带单元格样式的workbook，再设置上述代码，会覆盖原有的单元格背景色

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

SpreadJS在Sheet中实现过滤后始终显示交替行样式

0 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人