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

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

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

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

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

1.       let sheet = spread.getSheet(0);
   
2.         for(var r=0;r<sheet.getRowCount();r++){
   
3.             
   
4.             if(sheet.getRowVisible(r)){
   
5.                 i++;
   
6.                 if(i%2==0)
   
7.                     sheet.getRange(r,-1,1,-1).backColor('#EEEEF8');
   
8.                 else
   
9.                     sheet.getRange(r,-1,1,-1).backColor('white');
   
10.             }
    
11.         }

复制代码

设置后的效果如下


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




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

参考代码如下

1. 
   
2. sheet.bind(GC.Spread.Sheets.Events.RangeFiltered, function (e, info) {
   
3.     let i=0;
   
4.         for(r=0;r<sheet.getRowCount();r++){
   
5.             console.log(sheet.getRowVisible(r));
   
6.             if(sheet.getRowVisible(r)){
   
7.                 i++;
   
8.                 if(i%2==0)
   
9.                     sheet.getRange(r,-1,1,-1).backColor('lightseagreen');
   
10.                 else
    
11.                     sheet.getRange(r,-1,1,-1).backColor('white');
    
12.             }
    
13.         }
    
14. });

复制代码

设置后的效果



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