1.常用操作模板
<script type="text/html" id="userbar"> <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="change">修改</a>
{{#
var statusBut= function(date){
if(date==0){
return '<a class="layui-btn layui-btn-xs" lay-event="edit">配置</a>';
}else if(date==1){
return'<a class="layui-btn layui-btn-xs" lay-event="edit">禁用</a>';
}else if(date==2){
return '<a class="layui-btn layui-btn-xs" lay-event="edit">启动</a>';
}
}
}}
{{ statusBut(d.status)}}
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
2.时间格式转换模板
<script type="text/html" id="TimeTpl">
{{#
var parseDate= function(date){
if(date){
var t=new Date(date);
return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()+" "+t.getHours()+":"+t.getMinutes();
}
}
}}
{{parseDate(d.updateTime)}}
</script>
3.状态转换模板
<script type="text/html" id="statusTpl">
{{#
var statusTxt= function(date){
if(date==0){
return "未配置";
}else if(date==1){
return "启动";
}else if(date==2){
return "禁用";
}
}
}}
{{ statusTxt(d.status)}}
</script>
4.使用模板:(红色标记一下, 色盲就对不起了, 自己找ID)
var a = table.render({
elem: "#userTables",
skin: 'line', //行边框风格
cols: [[
{checkbox: true, width: 60, fixed: true},
{type: 'numbers', title: '序号', width: '40'},
{
field: "name",
width: 80,
title: "姓名",
align: "left"
}, {
field: "phone",
width: 120,
title: "电话",
align: "left"
}, {
field: "identificationNuber",
width: 170,
title: "身份证号码",
align: "left"
}, {
field: "updateTime",
width: 140,
title: "更新时间",
align: "left",
templet: '#TimeTpl'
}, {
title: "常用操作",
width: 200,
align: "left",
toolbar: "#userbar",
fixed: "right"
}]],
url: "/user/getReportList",
// data: userData,
page: { //分页设定
layout: ['count', 'prev', 'page', 'next'] //自定义分页布局
, curr: 1 //设定初始在第 1 页
, limit: 10//每页多少数据
, groups: 5 //只显示 5 个连续页码
},
even: true
}