首先开启合计行:totalRow: true,

然后在想要开启合计的列添加:totalRowText: '自定义内容'

最后:

done: function(res, curr, count){
            this.elem.next().find('.layui-table-total td[data-field="field"] .layui-table-cell').text("自定义内容");
        }

下面来看实战

table.render({
        elem: '#custom-table-operate',
        url: 'Tomb_tombAreaList', 
        css: [
          '.layui-table-view td[data-edit]{color: #16B777;}'
        ].join(''),
        totalRow: true,
        cols: [[
          // {checkbox: true, fixed: true},
          {type:"numbers", fixed: 'left', title: '序号', width:90, align:"center", totalRowText: '合计'},
          {field:'', title: '销售情况', width:190, totalRowText: '已售:', templet: function (item){
            if(item.FSale == 0 && item.FOrder ==1){
                return "已预定"
            }else if(item.FSale == 0 && item.FOrder == 0){
                return "空闲"
            }else{
                return "已售"
            }}},
          {field:'FTombName', title: '墓园', width:190}, 
          {field:'FTombType', title: '墓型', width:190, totalRowText: '已预定'}, 
          {field:'FName', title: '墓区', width:190},   
          {field:'FRow', title: '排', width:190, totalRowText: '空闲'},     
          {field:'FRowNum', title: '座', width:190},  
        ]],
            height: 450,
            page:true,
        page: { 
          layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
          //,curr: 5 //设定初始在第 5 页
          // ,groups: 3 //只显示 1 个连续页码
          ,first: false //不显示首页
          ,last: false //不显示尾页
          ,limits: [10, 20, 30]
          ,limit:10
        },
        parseData:function(res){
          //解析分页数据
          var result;
          if (this.page.curr) {
              result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
          } else {
              result = res.data.slice(0, this.limit);
          }
          return {
              "code": res.code, //解析接口状态
              "msg": res.msg, //解析提示文本
              "count": res.count, //解析数据长度
              "data": result //解析数据列表
          }
        }, 
        done: function(res, curr, count){
            this.elem.next().find('.layui-table-total td[data-field="FTombName"] .layui-table-cell').text(obj.sale);
            this.elem.next().find('.layui-table-total td[data-field="FName"] .layui-table-cell').text(obj.order);
            this.elem.next().find('.layui-table-total td[data-field="FRowNum"] .layui-table-cell').text(obj.notsale);
        }
      });

页面显示效果如下:

最后祝大家旗开得胜!

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐