Layui 是否开启合计行区域

                                                                Layui 是否开启合计行区域

1、设置表格打开合计行

    table.totalRow:true

2、设置要统计的行

    table.cols.totalRowText:显示自定义的合计文本
    table.cols.totalRow:是否开启该列的自动合计功能

3、官方演示地址

4、相关代码

<!-- HTML -->
<!-- 表格载体 -->
<table id="table-id"></table>

//JS
layui.use(['table'], function () {
    let table = layui.table;         //表格

    let tableObj = table.render({
        elem: '#table-id',   //表ID
        url: '/.../.../...',    //数据来源路径
        totalRow:true,	//开启合计行
        cols: [[
            //totalRowText:用于显示自定义的合计文本
            {field: 'date', align:'center',title: '日期', totalRowText:'合计'},
            //totalRow:是否开启该列的自动合计功能
            {field: 'come_in', title: '收入',totalRow:true},
            //totalRow:是否开启该列的自动合计功能
            {field: 'come_out', title: '支出',totalRow:true}
]],
        text: { //自定义文本，如空数据时的异常提示等。
            none: '暂无数据！'
        },
        where:{'target_date':'2020-02'},//查询条件
        page: false, //关闭分页
        parseData: function(res) {  //res 即为原始返回的数据
            return {
                code: res.code,
                msg: res.msg,
                count: res.data.count,
                data: res.data.data
            }
        },
        done(res, curr, count){ //数据渲染完的回调
            //如果是异步请求数据方式，res即为你接口返回的信息。
            //如果是直接赋值的方式，
            //res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            console.log(res);

            //得到当前页码
            console.log(curr);

            //得到数据总量
            console.log(count);
        }
    });
});