找回密码
 立即注册

QQ登录

只需一步,快速开始

Erik.Xue 讲师达人认证 悬赏达人认证 活字格认证 Wyn认证
超级版主   /  发表于:2022-8-4 16:54  /   查看:2245  /  回复:0
本帖最后由 Erik.Xue 于 2022-8-24 11:27 编辑

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

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

1、页面绑定表格

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

2、设置公式

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

对应的Excel公式分别为:

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


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

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

然后给放置公式的单元格起个名字。
image.png967733154.png
注意:对应的汇总行也要设置对应的汇总公式:

image.png629384460.png

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

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

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

image.png346173400.png

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

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

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

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

4、运行工程

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


GIF 2022-8-4 16-49-19.gif

是不是很nice~~~

image.png484123229.png

附件是工程文件demo 松绑定汇总行.fgcc (82.71 KB, 下载次数: 55)

0 个回复

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