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

QQ登录

只需一步,快速开始

Joestar.Xu SpreadJS 开发认证
超级版主   /  发表于:2024-11-26 11:15  /   查看:65  /  回复:0
本帖最后由 Joestar.Xu 于 2024-12-4 11:54 编辑
https://gcdn.grapecity.com.cn/showtopic-228999-1-1.html

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


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

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

image.png802410888.png

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

image.png171122740.png

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

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

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

image.png825372314.png

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

image.png760083312.png

image.png24441527.png

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

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

image.png629656371.png

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

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

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

归纳一下规则:

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


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

除此以外,还有一种情况,如下图:

image.png865162048.png

image.png616906737.png

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

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

image.png397776183.png

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

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

0 个回复

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