LAYUI使用动态表格时,给列追加template,自定义当前列的图标、背景色等
让STATUS针对不同状态时有个不同的背景色
table.render({
elem: '#getdata',
url: '/index.php?s=/index/user/borrower_list',
page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,
groups: 1 //只显示 1 个连续页码
,
first: false //不显示首页
,
last: false //不显示尾页
},
done: function (res, curr, count) {
console.log(res);
if (res.status == 200) {
$("#getdata")
.css('display', 'block');
$("#empty")
.css('display', 'none');
} else {
$("#getdata")
.css('display', 'none');
$("#empty")
.css('display', 'block');
}
$(".layui-laypage-count")
.html('ALL ' + count + ' ');
},
toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
,
defaultToolbar: ['filter', 'exports', 'print'],
title: 'export_data',
cols: [
[{
type: 'checkbox',
fixed: 'left'
},
{
field: 'borrower_id',
width: 80,
title: 'ID',
sort: true
}, {
field: 'borrower_truename',
width: 120,
title: 'NAME'
}, {
field: 'borrower_phone',
width: 100,
title: 'PHONE'
}, {
field: 'borrower_email',
width: 120,
title: 'EMAIL'
}, {
field: 'borrower_purpose',
title: 'PURPOSE',
minWidth: 150
}, {
field: 'borrower_status_text',
width: 100,
title: 'STATUS',
sort: true,
templet: function(d){
console.log(d);
if (d.borrower_status == '1') {
return '<span class="layui-badge layui-bg-orange">' + d.borrower_status_text+'</span>';
} else if (d.borrower_status == '2') {
return '<span class="layui-badge layui-bg-green">' + d.borrower_status_text+'</span>';
} else if (d.borrower_status == '3') {
return '<span class="layui-badge layui-bg-blue">' + d.borrower_status_text+'</span>';
}
}
}, {
field: 'borrower_addtime',
width: 170,
title: 'TIME',
sort: true
}, {
fixed: 'right',
title: 'ACTION',
toolbar: '#barDemo',
width: 150
}
//, { field: 'borrower_addip', width: 100, title: 'IP', sort: true }
]
]
});