layui table使用templet，解析状态字段,逻辑处理等

比如有这样一个表格：


我们想把其中的状态变成具体的文本描述，就可以使用layui table的templet


方法1：直接给一个函数即可。效果如下：

贴一下代码：

table.render({
    elem: '#test'
    , url: '/home/GetUserData'
    , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    , cellMinWidth: 80 
    , cols: [[
        { type: 'checkbox', fixed: 'left' },
        { field: 'Id', width: 80, title: 'ID' }
        , { field: 'UserName', width: 80, title: '用户名' }
        , { field: 'Number', title: '学号' }
        , { field: 'UClass', title: '班级' }
        , {
            field: 'CheckType', title: '状态', templet: function (d) {
                if (d.CheckType == 1) {
                    res = "<span class=\"layui-badge\">正在审核</span>"
                } else if (d.CheckType == 2) {
                    res = "<span class=\"layui-badge layui-bg-blue\">审核通过</span>"
                }
                else {
                    res = "<span class=\"layui-badge layui-bg-black\">审核失败</span>"
                }
                return res;
            }, minWidth: 100
        }
        , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
    ]], page: true
});

方法2：把绑定的模板提出来写,这样重用性可以更好一点
下述是templet对应的模板，它可以存放在页面的任意位置。模板遵循于 laytpl 语法，可读取到返回的所有数据。

<script type="text/html" id="switchTpl">
    {{#  if(d.CheckType == 1){ }}
    <span class="layui-badge">正在审核</span>
    {{#  } else if(d.CheckType == 2) { }}
    <span class="layui-badge layui-bg-blue">审核通过</span>
    {{#  } else{ }}
       <span class="layui-badge layui-bg-black">审核失败</span>
    {{#  } }}
</script>

然后把id给对应的字段就行：


这个模板引擎的位置这这里：



方法3：直接绑定一个简单的模板
对于简单的数据处理，可以直接给一个模板

templet: '<div><a href="" class="layui-table-link">{{d.title}}</a></div>'

注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板