首先开启合计行: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);
}
});
页面显示效果如下:
最后祝大家旗开得胜!