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