本帖最后由 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, sum, count],也就是可以用null作为数组占位值。
PS:因为用的是内置接口,所以不保证未来新版本中会更改此接口,目前已知7.0.104.0和8.0.4.0版本是可以正常使用的。
修改好之后,将 setTotalRowValues.js 这个JS文件上传到表格页面上。
4、运行工程
然后运行工程,来看下效果~
是不是很nice~~~
附件是工程文件demo
松绑定汇总行.fgcc
(82.71 KB, 下载次数: 216)
|