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,  60, fixed: true},
                {type: 'numbers', title: '序號',  '40'},
                {
                    field: "name",
                     80,
                    title: "姓名",
                    align: "left"
                }, {
                    field: "phone",
                     120,
                    title: "電話",
                    align: "left"
                }, {
                    field: "identificationNuber",
                     170,
                    title: "身份證號碼",
                    align: "left"
                }, {
                    field: "updateTime",
                     140,
                    title: "更新時間",
                    align: "left",
                    templet: '#TimeTpl'
                }, {
                    title: "常用操作",
                     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
}

總結

以上是生活随笔為你收集整理的layui数据表格的td模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。