LayUi表格中templet的使用

templet 可以理解为三元运算符

1. 简单的写法有：

  templet: function (data) {
       if (data.status == 1) {
             return "待执行";
        }
       if (data.status == 2) {
          return "执行中";
        }
       if (data.status == 3) {
   		  return "执行完毕";
        }
     }

是不是很像Java中的三元运算符

2.日期时间戳的转换：
parseToDate(date).format(“yyyy-MM-dd hh:mm:ss”)

  templet: function (data) {
      return parseToDate(data.endTime).format("yyyy-MM-dd hh:mm:ss");
   }

LayUI最简单的格式

<div class="layui-fluid">		//使用此类不会固定宽度，而是 100%自适应
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <c:if test="${not empty villages and fn:length(villages) > 1}">
                    <div class="layui-col-md3">
                        <label class="layui-form-label">小区</label>
                        <div class="layui-input-block">
                            <select name="villageId">
                                <option placeholder="请选择小区"></option>
                                <c:forEach items="${villages}" var="village">
                                    <option value="${village.id}">${village.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </c:if>
                <div class="layui-col-md3">
                    <label class="layui-form-label">模糊查询</label>
                    <div class="layui-input-block">
                        <input type="text" name="fuzzy" placeholder="设备名字/序列号" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label">设备类型</label>
                    <div class="layui-input-block">
                        <select name="equipmentType">
                            <option placeholder="请选择"></option>
                            <c:forEach var="t" items="${types}">
                                <option value="${t.code}">${t.codeName}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <button type="button" class="layui-btn" lay-submit lay-filter="dict-front-search" style="margin-left: 10px;">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <script type="text/html" id="toolbar-deviceListPage-device">
                <div class="layui-btn-container">
                    <btn:btn btnStr="deviceAdd">
                        <button class="layui-btn" lay-event="add">新增</button>
                    </btn:btn>
                    <btn:btn btnStr="deviceDetection">
                        <button class="layui-btn layui-btn-normal" lay-event="detection">在线检测</button>
                    </btn:btn>
                </div>
            </script>
            <table id="device-page-data" lay-filter="device-page-data"></table>
            <script type="text/html" id="tool-deviceListPage-device">
                <btn:btn btnStr="deviceEdit">
                    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit"><i
                            class="layui-icon layui-icon-edit"></i>编辑</a>
                </btn:btn>
                <btn:btn btnStr="deviceDelete">
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                            class="layui-icon layui-icon-delete"></i>删除</a>
                </btn:btn>
<%--                {{# if(d.type == 1){ }}--%>
<%--                <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="uploadCloud"><i--%>
<%--                        class="layui-icon layui-icon-edit"></i>同步云眸</a>--%>
<%--                {{# } }}--%>
                {{# if(d.type == 2){ }}
                    <btn:btn btnStr="deviceDown">
                        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="downCustomConfig"><i
                                class="layui-icon layui-icon-edit"></i>下发配置</a>
                    </btn:btn>
                {{# } }}
            </script>
        </div>
    </div>
</div>

<script type="text/javascript">
    var tableName = "device-page-data";
    layui.config({
        base: "${ctx}/static/framework/layuiadmin/" //静态资源所在路径
    }).extend({
        index: "lib/index" //主入口模块
    }).use(["table"], function () {
        var table = layui.table;
        table.render({
            elem: '#deviceSupplement-page-data',   //找到元素id
            method: 'post',
            height: 'full-100',
            autoSort: false,
            url: '${ctx}/supplement/getDeviceSupplementPage', //接口信息
            cols: [[
                {
                    field: 'successNum',		//接口返回字段信息
                    title: '成功人数',
                },
                {
                    field: 'errorNum',		//接口返回字段信息
                    title: '失败人数',
                },
                {
                    field: 'startTime',		//接口返回字段信息
                    title: '开始时间',
                    templet: function (data) {
                        return parseToDate(data.startTime).format("yyyy-MM-dd hh:mm:ss");
                    }
                },
                {
                    field: 'endTime',		//接口返回字段信息
                    title: '结束时间',
                    templet: function (data) {
                        return parseToDate(data.endTime).format("yyyy-MM-dd hh:mm:ss");
                    }
                },
                {
                    field: 'status',		//接口返回字段信息
                    title: '状态',
                    templet: function (data) {
                        if (data.status == 1) {
                            return "待执行";
                        }
                        if (data.status == 2) {
                            return "执行中";
                        }
                        if (data.status == 3) {
                            return "执行完毕";
                        }
                    }
                },
                {
                    field: 'remark',		//接口返回字段信息
                    title: '备注',
                },
                {
                    field: 'resultStr',
                    title: '相关信息',
                }, {
                    title: "操作",
                    width: 300,
                    align: "center",
                    fixed: "right",
                    toolbar: "#tool-deviceSupplementListPage-device"
                }
            ]
            ],
            page: true,		//是否开启分页
            limit: 20,		//每页大小
            limits: [20, 50, 100],
            text: {
                none: "暂无相关数据"
            }
        });
    });

</script>