SpreadJS在Sheet中实现过滤后始终显示交替行样式
本帖最后由 Richard.Ma 于 2022-7-11 09:57 编辑在Gird或者Sheet表格中中展示大量的行数据，尤其是每条行数据本身比较类似，而列数很多需要拖动滚筒条时，如果每行的背景色相同，使用人员很容易找不到数据对应的具体是哪一行
交替行样式在这个时候可以让表格变的更加易读，因此很多Gird或者Sheet类的表格控件大都支持交替行样式设置
在spreadjs中，table表格本身提供了交替行样式，在给table中我们通过设置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，再设置上述代码，会覆盖原有的单元格背景色
页:
[1]