找回密码
 立即注册

QQ登录

只需一步,快速开始

爱迪生

超级版主

55

主题

65

帖子

1378

积分

超级版主

Rank: 8Rank: 8

积分
1378
爱迪生
超级版主   /  发表于:2021-12-30 18:46  /   查看:2269  /  回复:0
本帖最后由 爱迪生 于 2021-12-30 18:51 编辑

需求在SpreadJS使用过程中,经常会通过setArry方式写入数据
  1. sheet.setArray(2, 1, dataArray1, false);
  2. sheet.setArray(0, dataArray1[0].length + 1, dataArray2, false);
  3. sheet.setArray(3, dataArray1[0].length + 1, dataArray3, false);
复制代码

然后通过getRange(),后对区域通过backColor(),foreColor(),formatter(),hAlign(),vAlign()方法对区域进行样式设计
  1. sheet.getRange(0, 0, rowCount, columnCount, GC.Spread.Sheets.SheetArea.viewport).backColor("#fff");
  2. sheet.getRange(2, 1, 1, columnCount, GC.Spread.Sheets.SheetArea.viewport).foreColor('#000');
  3. sheet.getRange(0, 0, rowCount, columnCount, GC.Spread.Sheets.SheetArea.viewport).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
  4. sheet.getRange(0, 0, rowCount, columnCount, GC.Spread.Sheets.SheetArea.viewport).vAlign(GC.Spread.Sheets.VerticalAlign.center);
  5. sheet.getRange(1, column1 + 1, 2, columnSplit, GC.Spread.Sheets.SheetArea.viewport).backColor("#C9DEF4");
  6. sheet.getRange(3, column1 + 1, row1, columnSplit, GC.Spread.Sheets.SheetArea.viewport).backColor("#DFDFDF");
  7. sheet.getRange(1, columnSplit + column1 + 1, 2, columnCount, GC.Spread.Sheets.SheetArea.viewport).backColor("#CDFFCD");
复制代码

// /* 可编辑颜色 */
  1. editArr.forEach(item => {
  2.                sheet.getRange(item, columnSplit + column1 + 1, 1, columnCount, GC.Spread.Sheets.SheetArea.viewport).backColor("#FCE6C7");
  3.                 })
  4. sheet.getRange(3, column1 + 1, row1, columnCount, GC.Spread.Sheets.SheetArea.viewport).backColor("#DFDFDF");
  5. sheet.getRange(0, 0, 3, columnCount, GC.Spread.Sheets.SheetArea.viewport).font("bold 13px arial");
  6. sheet.getRange(3, 0, rowCount, columnCount, GC.Spread.Sheets.SheetArea.viewport).font("13px arial");
  7. sheet.getRange(0, 0, 13, columnCount, GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder("#D7D7D7", GC.Spread.Sheets.LineStyle.thin), { all: true });
复制代码


页面显示效果如下:

存在问题:
由于整个sheet,10000多行,100多列,使用getRange()对进行样式和字体设置,相当于遍历设置样式,整个页面加载时间较长:

优化思路
1.将字体水平居中,垂直居中通过setDefaultStyle()设置:
  1. let sytleAlignment = new GC.Spread.Sheets.Style();
  2. sytleAlignment .hAlign = GC.Spread.Sheets.HorizontalAlign.center;
  3. sytleAlignment .vAlign = GC.Spread.Sheets.VerticalAlign.center;
  4. sytleAlignment .backColor = "#fff";
  5. sheet.setDefaultStyle(sytleAlignment);
复制代码


2.将较大区域通过setStyle(),设置在列上,如下图的3,和4区域,行数都超过了10000行,然后将小区域部分通过getRange()方式设置样式和字体

部分代码如下:
  1. let styleBackColor = new GC.Spread.Sheets.Style();
  2. styleBackColor.backColor  = "#DFDFDF"
  3. styleBackColor .hAlign = GC.Spread.Sheets.HorizontalAlign.center;
  4. styleBackColor .vAlign = GC.Spread.Sheets.VerticalAlign.center;
  5. for(let i=column1 + 1;i<columnCount;i++){
  6.          sheet.setStyle(-1,i,styleBackColor);
  7.                 }
  8. sheet.getRange(0,column1 + 1,1,columnCount,GC.Spread.Sheets.SheetArea.viewport).backColor('#fff');
复制代码

3.优化完加载时间:

总结
1.在进行样式设置时,如果所有单元格都适用,优先使用setDefaultStyle()设置
2.对大片区域进行样式设置时,优先使用setStyle()将样式设置在列上
3.先对大片区域进行样式设置,再对小部分区域进行样式设置,覆盖样式(注意样式的优先级)
附件:
附件中“测试数据_原版.html”为优化前源码,
附件中的“测试数据.html”为优化后源码







spreadjs_demo .zip

2.3 MB, 下载次数: 110

0 个回复

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