基於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. 修改正確之后展示的樣子