layui前端时间的转换并展示


var active;
layui.use(['table','laydate'], function(){
    var token=getToken();
    var $ = layui.$
    var table = layui.table;
    var laydate= layui.laydate;
    //第一个实例
    table.render({
        elem: '#sysErrorLog'
        ,height: 'full-150'
        ,skin: 'row' //行边框风格
        ,even: true //开启隔行背景
        ,size: 'lg' //小尺寸的表格
        ,url: url+'api/interfaceInvokeLog/findInterfaceInvokeLogs' //数据接口
        ,limit:20
        ,page: true //开启分页
        ,cols: [[ //表头
            {type:'numbers' , title: '序号',fixed: 'left',width:'10%'}
            ,{field:'startSys' , title: '主调系统', width:'15%'}
            ,{field:'targetSys' , title: '被调系统', width:'15%'}
            ,{field: 'interfaceUrl', title: '接口路径', width:'10%'}
            ,{field:'title' , title: '调用结果', width:'20%'}          
            ,{field:'invokeStartTime' , title: '调用开始时间', width:'10%',templet: '

{{ Format(d.invokeStartTime)}}
'}
            ,{field:'invokeReturnTime' , title: '平台返回时间', width:'10%',templet: '
{{ Format(d.invokeReturnTime)}}
'}
            , {fixed : 'right',title : '详情',width : '10%',align : 'center',toolbar : '#barUser'
            } ]]
        ,id:"searchReload"
        ,done: function(res, curr, count){
            data(res,'active');
            powerButton('','detail');
        }
        });

    active = {
        reload: function(){
            var title = $('#title');
            var invokeStartTime = $('#invokeStartTime');
            var invokeReturnTime = $('#invokeReturnTime');
            var startSys = $('#startSys');
            var targetSys = $('#targetSys');
            var operatorMark = $('#operatorMark');
            var interfaceUrl = $('#interfaceUrl');
            var requestType = $('#requestType');
            var requestParams = $('#requestParams');
            var returnResult = $('#returnResult');
            var handleTime = $('#handleTime');
            var rpcTime = $('#rpcTime');
            var description = $('#description');
            table.reload('searchReload', {
                where: {
                    title: title.val(),
                    invokeStartTime: invokeStartTime.val(),
                    invokeReturnTime: invokeReturnTime.val(),
                    startSys: startSys.val(),
                    targetSys: targetSys.val(),
                    operatorMark: operatorMark.val(),
                    interfaceUrl: interfaceUrl.val(),
                    requestType: requestType.val(),
                    requestParams: requestParams.val(),
                    returnResult: returnResult.val(),
                    handleTime: handleTime.val(),
                    rpcTime: rpcTime.val(),
                    description: description.val(),
                }
            });
        }
    };
    
    $('#search .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    // 监听工具条
    table.on('tool(myTable)', function(obj) { // 注:tool是工具条事件名,test是table原始容器的属性
        // lay-filter="对应的值"
        var data = obj.data // 获得当前行数据
        , layEvent = obj.event; // 获得 lay-event 对应的值
        if (layEvent === 'detail') {
            layer.open({
                type : 2,
                title : [ '详情' ],
                shadeClose : false,
                shade : [ 0.3, '#000' ],
                maxmin : true,
                area : [ '400px', '400px' ],
                content : '../log/interfaceInvokeLogDetail.html?id=' + obj.data.id,
                end : function() {
                    // 如果是通过单击关闭按钮关闭弹出层,父画面没有此表单
                    // if($("#popupForm").length === 1){
                    // $("#popupForm").submit();
                    // }
                }
            });
        } 
    });
    
      
    laydate.render({
        //日期范围选择
          elem: '#invokeStartTime'
         ,type: 'datetime'
         ,range: '~'      //如果设置 true,将默认采用 “ - ” 分割或 range: '~' 来自定义分割字符
        });
})

// 月(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) {
     /**
      * 由于该页面展示的都是yyyy-MM-dd hh:mm:ss类型,这里将该方法的一个参数直接在方法中写死,
      * 若需要其他的时间形式,可将时间模式放到第二个参数的位置上

      */
      var fmt="yyyy-MM-dd hh:mm:ss";
      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;
}


    

 

你可能感兴趣的:(开发经验)