最近在用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);
}
});
}
});