layui 如何在渲染table前处理数据
最近在用layui开发管理系统,果然是“累”ui
实现功能:将之前选择的选项勾选,渲染备注信息(原数据为空的列)
<table class="layui-hide" id="test" lay-filter="test">
</table>
table 渲染前修改数据,需要用ajax
$.ajax({
url: "/product/showProduct",
type: "GET",
dataType: 'json',
success: function (res) {
//数据处理
for (var item in res.datas) {
renderInfo(res.datas[item], idList, amountList, remarksList);
}
table.render({
elem: '#test'
// ,skin: 'nob' //无边框风格
, toolbar: '#toolbarDemo'
, title: '产品数据表'
// , totalRow: true
, cols: [
[
{type: 'checkbox', fixed: 'left'}
, {
field: 'id',
title: 'ID',
width: 80,
fixed: 'left',
unresize: true,
cellMinWidth: 80,//全局定义常规单元格的最小宽度,layui 2.2.1 新增
sort: true,
totalRowText: '合计'
}
, {field: 'productName', title: '功能模块'}
]
]
, data: res.datas
// , page: true //是否显示分页
});
}
});
table渲染后修改数据,layui提供done方法
table.render({
elem: '#test'
// ,skin: 'nob' //无边框风格
, url: '/product/showProduct'
, toolbar: '#toolbarDemo'
, title: '产品数据表'
, response: {
// countName: 'count',
dataName: 'datas' //规定数据列表的字段名称,默认:data
}
// , totalRow: true
, cols: [
[
{type: 'checkbox', fixed: 'left'}
, {
field: 'id',
title: 'ID',
width: 80,
fixed: 'left',
unresize: true,
cellMinWidth: 80 ,//全局定义常规单元格的最小宽度,layui 2.2.1 新增
sort: true,
totalRowText: '合计'
}
, {field: 'productName', title: '功能模块'}
]
],
// , page: true //是否显示分页
// done: function(res, curr, count){// done模板
// //如果是异步请求数据方式,res即为你接口返回的信息。
// //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
// console.log(res.datas);
//
// //得到当前页码
// console.log(curr);
//
// //得到数据总量
// console.log(count);
// }
done: function (res, curr, count) {//修改totalRow时刚好用到了done
$(".layui-table-total div").each(function (i,item) {
var div_text = $(item).html();
if(div_text != ""&&div_text != '合计') {
$(item).html(total);
}
});
}
});