基于layui的数据列表展示数据中template的作用。使得日期等数据符合预期进行展示

1. 对于数据的列表展示(采用layui的table进行展示)，常常不能展示符合自己意愿的样子。看图说话

　　1.1 应展示的数据的样子

　　

　　

　　1.2 实际数据的样子

　　

2. 相关js代码

　　2.1 “错误”的js片段

// 设置列表属性
initData.tableHead.push( {
    field : 'cTime',
    title : '创建时间',
    width : cols[0]
}, {
    field : 'sTime',
    title : '开始时间',
    width : cols[1]
}, {
    field : 'eTime',
    title : '结束时间',
    width : cols[2]
}, {
    field : 'eType',
    title : '教育类型',
    width : cols[3]
});

　　2.2 增加模板template，以达到相应效果

<div id="templateDiv">
    <script type="text/html" id="eType">
            <div>
            {{# var fu = function(){
                            var eType = d.eType;
                            if(eType == 1){return "幼儿园";}
                            else if(eType == 2){return "学前班";}
                            else if(eType == 3){return "小学";}
                            else if(eType == 4){return "初中";}
                            else if(eType == 5){return "高中";}
                            else if(eType == 6){return "中专";}
                            else if(eType == 7){return "大学";}
                            else if(eType == 8){return "大专";}
                            else if(eType == 9){return "研究生";}
                            else if(eType == 10){return "博士生";}
                            else if(eType == 11){return "博士后";}
                            else{return "其它";}
                        }
            }}
            {{fu()}}
            </div>
        </script>
    <script type="text/html" id="sTime">  
              <div>
            {{# var fu = function(){
                            var sTime = d.sTime;
                            if(null != sTime){return formatTime(sTime, "yyyy-MM-dd");}
                        }
            }}
            {{fu()}}
            </div>
        </script>
    <script type="text/html" id="eTime">  
              <div>
            {{# var fu = function(){
                            var eTime = d.eTime;
                            if(null != eTime){return formatTime(eTime, "yyyy-MM-dd");}
                        }
            }}
            {{fu()}}
            </div>
        </script>
</div>

　　d是layui封装的。代表每一行的数据对象，模板中对应的sTime、eTime、eType是后台对象必须存在属性，才能相应进行转换。

　　2.3 加入对应的template后，“正确”的js片段

// 设置列表属性
initData.tableHead.push( {
    field : 'cTime',
    title : '创建时间',
    width : cols[0],
    templet : '#datetime'
}, {
    field : 'sTime',
    title : '开始时间',
    width : cols[1],
    templet : '#sTime'
}, {
    field : 'eTime',
    title : '结束时间',
    width : cols[2],
    templet : '#sTime'
}, {
    field : 'eType',
    title : '教育类型',
    width : cols[3],
    templet : '#eType'
});

　　template ： ‘#datetime’ 此模板是layui定义好的，是"yyyy-MM-dd HH:mm:ss"格式，可以直接使用。其他格式需要自定义。

3. 修改正确之后展示的样子