在日常的学习或开发中,关于后台管理这一块的都会使用到layui.table数据表格,只要用到layui.table数据表格一般就会用到数据表格合计行。
在layui官方文档数据表格的这一栏中,有“totalRow”这一属性,是否开启合计行区域,默认是不开启的。注意:这属性是layui2.4.0之后新增的,版本不够的无法使用该属性的。这是table表格的属性。
接下来就是cols表头的属性,表头的参数同样也有“totalRow”这一属性,是否开启该列的合计功能,默认也是不开启的,默认值为false。另外还有一个“totalRowText”属性,是用于显示自定义的合计文本。
关键代码如下图所示:
1.首先需要在table中添加totalRow参数并将其设为true开启合计行区域;
2.之后在第一列中添加totalRowText参数是你需要显示的合计文本;
3.最后在需要合计数据的表头中添加totalRow参数为true开启该列的自动合计功能;
效果图如下: