layui表格实现合计

  今天遇到了新的需求，要在表格中加一栏合计，这可愁坏了我，别误会，不是太难，而是不知道用哪种方法......

 

                                                         

 

  毕竟作为一个程序员，办法总比问题多，细细思索之后，我想到了三种方案：

  (ps：如果着急的小伙伴，请直接看plan C)

plan A：后台进行统计

  play A是最简单的了，那就是在后台查询出结果之后，遍历一遍数据，得到其总计，之后在原有的数据中添加一行作为统计的数据，大概就是酱紫：

  我们将第一个显示的参数，也就是上面的编号设为合计，然后计算其需要统计的字段，其他字段则无需计算，计算之后，与其他数据放在一起进行返回，也就是说，假设我们一次查询10条数据，那么实际上我们给前台返回的是11条数据，第11条数据存的正好是统计的哪一行。

 

plan B：前台计算

  planB的话，实际上小编并没有做出来....................

                                                

  但是！！！！作为一个嘴强王者，我觉得我的计划是可行的！

                                                   

  planB就是前台将数据遍历之后，通过某一标签(class，name)获取到表格中的数据，之后将数据进行计算，然后通过append添加一行统计之后的数据。这样的话就需要有一定的js基础，而且相比于后台进行计算的话，把逻辑计算放在了前台，那么势必会减慢前台页面加载的速度，应该谨慎使用。

 

plan C：layui自带的方法

  噔噔蹬噔，压轴选手出场，这也是这篇博文的主角，layui自带了数据表格统计方法！

  在想了plan A与play B之后，我想起了我用的是框架，那么框架是否对这个功能有支持呢？答案是有的！小编去找了找官方文档，看到了这个：

 

 

  在layui官方文档数据表格这一栏中，有totalRow这一属性，是layui 2.4.0之后新增的（此处划重点，注意版本，版本不够的小伙伴就无法使用这个了），是否开启合计行区域，默认是不开启的，这是table(表格)的参数，再往下看，是cols(表头)的参数：

 

 

  同样有一个totalRow的参数，而且还有totalRowText的参数，是显示合计文本，看到这里，合计参数的用法就显而易见了，

我们首先需要在table中开启合计，也就是添加totalRow参数并将其设为true，之后，在第一列中，添加totalRowText参数，他的值就是你要显示的合计文本，可以自己设置，一般都是“合计“，“统计“这样，就像下图所示：

 

  最后就是在具体要统计的表头中，添加totalRow为true的属性，这样就大功告成了！代码如下：

table.render({
            elem: '#user', 
            url: **********, 
            page: true, 
            cellMinWidth: 100,
            totalRow:true,
            cols: [
                [ //表头
                    //{ type: 'checkbox' },
                    { type: 'checkbox',totalRowText: "合计" },
                    { field: 'id', align: 'center', title: '编号'},
                    { field: 'phone', align: 'center',title: '手机号码' },
                    { field: 'name', align: 'center',title: '姓名' },
                    { field: 'position', align: 'center',title: '单位' },
                    { field: 'address', align: 'center', title: '地区' },
                    { field: 'detailAddress', align: 'center',title: '详细地址' },
                    { field: 'totalPoint', align: 'center',title: '总积分',totalRow: true },
                    { field: 'availAmount',align: 'center',title: '可用积分',totalRow:true},
                ]
            ],
            done: function(res){
                if(res && res.code !== 0){
                    layer.msg(res.message);
                }
            }
        });

  关键地方如下图所示：

下面是小编的实际使用效果：

 

以上就是小编总结layui中数据合计的方法，希望能帮助到大家!