layui-table 自定义合计行内容

首先开启合计行: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);
        }
      });

页面显示效果如下:

最后祝大家旗开得胜!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值