Erik.Xue 发表于 2022-8-4 16:54:55

一看就会,超有用活字格技能:一百五十六、松绑定状态下实现汇总行统计

本帖最后由 Erik.Xue 于 2022-8-24 11:27 编辑

汇总行,想必各位小伙伴都有使用过吧。但是,熟悉格子的小伙伴应该都知道,汇总行有一个限制,就是汇总的是数据表中的数据,如果将表格设置为松绑定状态,此时给表格添加新行和值,是无法做到实时统计的。这个主要原因是考虑到分页的情况,所以我们的汇总行统计逻辑是在后端进行的。

那么,为了解决部分客户想要实现在前端表格松绑定汇总的需求,我们绞尽脑汁帮各位想了一个办法,接下来就听我为大家详细讲解一下~

1、页面绑定表格

我们先来新建一个工程,然后新建一个表格,绑定对应的字段,勾选《汇总行》,勾选《允许编辑》,《添加新行》,最重要的是开启表格松绑定。


2、设置公式

我们的汇总行字段提供五种汇总方式,如下图:


对应的Excel公式分别为:


公式类型 Excel公式
平均值 AVERAGE
计数 COUNT
最大值 MAX
最小值 MIN
求和 SUM


那么假如第一列要求和的话,那么找一个隐藏列的地方,放置一个SUM公式,传入的参数则是表格的第一列,如图:


同样的,如果第二列要计数,同样的做法,第二列就写COUNT公式。

然后给放置公式的单元格起个名字。

注意:对应的汇总行也要设置对应的汇总公式:



当然如果要动态汇总的列比较多,有几列,就放几个单元格公式,同样每个单元格都起好名称。

3、修改JS文件并上传至页面

打开 setTotalRowValues.js 文件,然后将我们刚才命名的表格名和单元格名称替换一下:



注意!!!在 JS 代码中设置 cellNameArr 数组时,顺序要对应好,也就是数组第一个元素对应第一列的汇总行,第二个元素对应第二列的汇总行,以此类推。

如果不从第一列开始设置,那么可以给对应的列值设为null,比如,也就是可以用null作为数组占位值。

PS:因为用的是内置接口,所以不保证未来新版本中会更改此接口,目前已知7.0.104.0和8.0.4.0版本是可以正常使用的。

修改好之后,将 setTotalRowValues.js 这个JS文件上传到表格页面上。


4、运行工程

然后运行工程,来看下效果~




是不是很nice~~~



附件是工程文件demo及用到的JS文件。



页: [1]
查看完整版本: 一看就会,超有用活字格技能:一百五十六、松绑定状态下实现汇总行统计