请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Richard.Ma 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-7-6 12:27  /   查看:102  /  回复:0
本帖最后由 Richard.Ma 于 2022-7-11 09:57 编辑

在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.         }
复制代码

设置后的效果如下
image.png776730346.png

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



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

参考代码如下

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

设置后的效果
bindfiltered.gif


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




0 个回复

您需要登录后才可以回帖 登录 | 立即注册