报表预览模式卡顿及样式问题

https://gcdn.grapecity.com.cn/showtopic-228999-1-1.html

报表插件的发布已经过去了很长一段时间，这段时间内报表插件受到了很多用户的青睐，越来越多的客户都开始尝试使用报表插件来展示自己的数据，但是在使用报表的过程中难免会遇到一些问题，比如预览模式下出现卡顿等性能问题，或是预览模式下的样式不符合自己的预期。


这些问题都或多或少地困扰着大家，因此本文将着重从“报表单元格样式”方面来帮助大家解决此类问题，并进一步加深对报表插件的理解。

首先我们从一个简单的例子开始：



这是一个简单的报表，其中只有三个字段，向下扩展。



扩展完毕后，约有两万条数据，此时我们滚动屏幕，会发现遇到了非常明显的卡顿。

两万条数据对于SpreadJS来说并不是一个很有压力的量级，理论上并不应该出现如此明显的卡顿。

因此，问题出现在模板本身，点击最左侧的单元格，我们会发现，左侧的单元格是一个很大的合并单元格。



涂上颜色给大家看看，会更加明显。





大家注意此处的绿色边框，这代表这个单元格是一个合并单元格。

如果我们清除掉此单元格的样式，并将数据行的行高设置为20（默认行高），会发生什么事情呢？



此时的滚动将会非常流畅，而且左侧单元格也不再是一个合并单元格，而是一个一个的独立单元格。

至此，我们已经找到了导致报表卡顿的原因，即——合并单元格。

一个巨大范围的合并单元格会消耗大量的绘制资源，导致滚动时出现卡顿的现象，当合并单元格解除后，将不再卡顿。

归纳一下规则：

• 单元格有样式。（cell级别，列级别，行级别）
• 单元格行高有变更。（和default行高不同）
• 单元格列宽有变更。（和default列宽不同）。
• 单元格有值
• 单元格有图表
• 单元格有图片
• 单元格有公式
• 单元格有录入信息
• 单元格在cell states range内。
• 单元格有绑定信息
• 单元格在span内
  

以上的情况下，单元格将会跟随上下文扩展。

除此以外，还有一种情况，如下图：





可以看到，预览的效果明显不是我们期望的效果，这主要是因为E列及后面数列存在样式，所以导致扩展时会将其囊括在内一块扩展。

使用clear接口清除样式后，我们再预览看看。



此时就符合我们的预期效果了。

大家在后续在制作模板时需要注意此处的扩展逻辑，否则会出现很多超预期的情况出现。