Layui 数据表格toolbar中使用模板引擎templet，当前系统时间比较问题

在layui数据表格展现中，使用toolbar，由于权限的控制，需要使用templet模板引擎语法进行控制，控制逻辑为只有大于当前时间的记录才能撤销。

效果图如下：（当前时间为2018-06-06）

这里写图片描述

即过了当前日期的记录是无法撤销。

代码：

window.demoTable = table
                        .render({
                            elem : '#idTest',
                            id : 'idTest',
                            url : '<%=path%>/content/getMryxPublishList',
                            /* width : 1700,
                            height : 685, */
                            width : 1700,
                            height : 650,
                            cols : [ [ //标题栏
                            {checkbox : true,LAY_CHECKED : false,filter : 'test'},
                            {field : 'TITLE',title : '学习主题',width : 200,sort : true,align : 'left'},
                            {field : 'LEARN_TYPE_NAME',title : '学习类型',width : 200,sort : true,align : 'center'},
                            {field : 'CONTENT',title : '学习内容',width : 350,sort : true,align : 'center',toolbar : '#view_content'}, 
                            {field : 'PUBLISH_DATE',title : '发布时间',width : 200,align : 'center'}, 
                            {fixed : 'right',title : '操作',width : 400,align : 'center',toolbar : '#barDemo'}
                            ] ],
                            page : true //是否显示分页
                            ,
                            where: { key:"" },
                            limits : [ 10, 20,50, 100 ],
                            limit : 10
                            ,done:function(res,curr,count){
                                $('table tr').on('click',function(){
                                     $('table tr').css('background','');
                                     $(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
                                 });
                            }
                        //每页默认显示的数量
                        });

<script type="text/html" id="barDemo">
    {{#  if(new Date(d.PUBLISH_DATE) > new Date()){ }}
                <a class="layui-btn" lay-event="cancel">撤销</a>
    {{#  } }}
</script>

使用这个要注意PUBLISH_DATE的数据类型，我这里是输出的是JSON字符串，PUBLISH_DATE为字符串类型。而且这种读取电脑时间去比较有些不妥，因为个人的电脑时间是可以随意修改的，最好跟服务器时间作比较。

*********************************格式化时间*********************************************
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test1</title>
	<link rel="stylesheet" type="text/css" href="../../Public/lib/layui/css/layui.css">
</head>
<body>

<table id="demo" lay-filter="testtable"></table>
               
<script type="text/javascript" src="../../Public/lib/layui/layui.js"></script>
<script type="text/javascript">
layui.use(["table"],function() {
	var table=layui.table;
  //展示已知数据
  table.render({
    elem: '#demo'
    ,data: [{
      "id": "10001"
      ,"username": "杜甫"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "116"
      ,"ip": "192.168.0.8"
      ,"logins": "108"
      ,"joinTime": "1507353913000"
    }, {
      "id": "10002"
      ,"username": "李白"
      ,"email": "xianxin@layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一场修行"
      ,"experience": "12"
      ,"ip": "192.168.0.8"
      ,"logins": "106"
      ,"joinTime": "2016-10-14"
      ,"LAY_CHECKED": true
    }]
    ,height: 272
    ,cols: [[ //标题栏
      {checkbox: true} //默认全选
      ,{field: 'id', title: 'ID', width: 80, sort: true}
      ,{field: 'username', title: '用户名', width: 120}
      ,{field: 'email', title: '邮箱', width: 150}
      ,{field: 'sign', title: '签名', width: 150}
      ,{field: 'sex', title: '性别', width: 80}
      ,{field: 'city', title: '城市', width: 100}
      ,{field: 'joinTime', title: '添加时间', width: 120,templet:'<div>{{ Format(d.joinTime,"yyyy-MM-dd")}}</div>'}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
    ]] 
    ,skin: 'row' //表格风格
    ,even: true
    ,page: true //是否显示分页
    ,limits: [5, 7, 10]
    ,limit: 5 //每页默认显示的数量
  });
  table.on('radio(testtable)', function(obj){
    //console.log(obj.checked); //当前是否选中状态
    console.log(obj.data); //选中行的相关数据
  });
});

// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，   
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   
// 例子：   
//Format("2016-10-04 8:9:4.423","yyyy-MM-dd hh:mm:ss.S") ==> 2016-10-04 08:09:04.423   
// Format("1507353913000","yyyy-M-d h:m:s.S")      ==> 2017-10-7 13:25:13.0  
function Format(datetime,fmt) {
  if (parseInt(datetime)==datetime) {
    if (datetime.length==10) {
      datetime=parseInt(datetime)*1000;
    } else if(datetime.length==13) {
      datetime=parseInt(datetime);
    }
  }
  datetime=new Date(datetime);
  var o = {
  "M+" : datetime.getMonth()+1,                 //月份   
  "d+" : datetime.getDate(),                    //日   
  "h+" : datetime.getHours(),                   //小时   
  "m+" : datetime.getMinutes(),                 //分   
  "s+" : datetime.getSeconds(),                 //秒   
  "q+" : Math.floor((datetime.getMonth()+3)/3), //季度   
  "S"  : datetime.getMilliseconds()             //毫秒   
  };   
  if(/(y+)/.test(fmt))   
  fmt=fmt.replace(RegExp.$1, (datetime.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;
}
console.log(Format("1507353913000","yyyy-M-d h:m:s.S"));
</script>
</body>
</html>

如有侵权，请联系本人

Layui 数据表格toolbar中使用模板引擎templet，当前系统时间比较问题

猜你喜欢