Layui框架 中table解決日期格式問題


使用templet自定義模板(詳細查看官方文https://www.layui.com)

      1.對Date的擴展,將 Date 轉化為指定格式的String ,創建一個js文件:

            (dataFormatSystem.js)

//對Date的擴展,將 Date 轉化為指定格式的String
//月(M)、日(d)、小時(h)、分(m)、秒(s)、季度(q) 可以用 1-2 個占位符,
//年(y)可以用 1-4 個占位符,毫秒(S)只能用 1 個占位符(是 1-3 位的數字)
//例子:
//(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
//(new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function(fmt)
{
    var o = {
        "M+" : this.getMonth()+1,                 //月份
        "d+" : this.getDate(),                    //日
        "h+" : this.getHours(),                   //小時
        "m+" : this.getMinutes(),                 //分
        "s+" : this.getSeconds(),                 //秒
        "q+" : Math.floor((this.getMonth()+3)/3), //季度
        "S"  : this.getMilliseconds()             //毫秒
    };
    if(/(y+)/.test(fmt))
        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
    for(var k in o)
        if(new RegExp("("+ k +")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
    return fmt;
}

  2.在執行一個table實例的cols某列添加templet(自己需要修改的列)

  table.render({
            elem: '#demo'
            ,height: 420
            ,url: '${pageContext.request.contextPath}/backstage/songManager.do' //數據接口
            ,title: '用戶表'
            ,page: true //開啟分頁
            ,toolbar: 'default' //開啟工具欄,此處顯示默認圖標,可以自定義模板,詳見文檔
            ,totalRow: true //開啟合計行
            ,limit:10
            ,cols: [[ //表頭
                {type: 'checkbox', fixed: 'left' , totalRowText: '合計:'}
                ,{field: 'songId', title: 'ID', width:80, sort: true, fixed: 'left' ,totalRow: true}
                ,{field: 'songName', title: '歌名', width:215}
                ,{field: 'singerId', title: '歌手編號', width:215}
                ,{field: 'songLrc', title: '歌詞路徑', width:215}
                ,{field: 'songReleseTime', title: '歌曲發行時間', width:215,templet:'#createTime'}
                ,{field:'songLongTime',title:'時長',width:215}
                ,{field: 'songNumberOfClick', title: '點擊量', width:215}
                ,{fixed: 'right', width: 215, align:'center', toolbar: '#barDemo'}
            ]],

            limits:[10,20,30,40,50]
        });

  3.將dateFormatSystem.js引入到需要修改的源文件中,在其中再添加一個js作為temple引用

<script src="../js/dateFormatSystem.js" type="text/javascript" charset="utf-8"></script>
<script id="createTime" type="text/html">
    {{#
    var date = new Date();
    date.setTime(d.songReleseTime);//songRelesrTime需要自定義的列的字段名
    return date.Format("yyyy-MM-dd");
    }}
</script>

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM