2. 程式人生 > >Layui 資料表格toolbar中使用模板引擎templet，當前系統時間比較問題

Layui 資料表格toolbar中使用模板引擎templet，當前系統時間比較問題

阿新 • • 發佈：2019-01-02

在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": "
 
[email protected]layui.com"
      ,"sex": "男"
      ,"city": "浙江杭州"
      ,"sign": "人生恰似一場修行"
      ,"experience": "116"
      ,"ip": "192.168.0.8"
      ,"logins": "108"
      ,"joinTime": "1507353913000"
    }, {
      "id": "10002"
      ,"username": "李白"
      ,"email": "[email protected]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，當前系統時間比較問題

在layui資料表格展現中，使用toolbar，由於許可權的控制，需要使用templet模板引擎語法進行控制，控制邏輯為只有大於當前時間的記錄才能撤銷。 效果圖如下：（當前時間為2018-06-06） 即過了當前日期的記錄是無法撤銷。 程式碼： window.demoTable

模板引擎 FreeMarker ，機密系統：jsp

執行 bat per 9.png log let servle web.xml cat 1.引依賴 pom.xml 2.分層 跟MyBatis步驟一樣 dao service entity servlet util 3.mybatis-config.xm

【轉】解決Layui資料表格中checkbox位置不居中

1.情景 使用方法渲染的方式生成資料表格，添加了checkbox，但發現checkbox位置不居中，如下圖所示  2.解決辦法 通過layui官方社群，找到如下程式碼，只需要新增如下樣式即可解決 <style> .layui-table-cell .l

關於 underscore 中模板引擎的應用演示樣例

tracking under 1.3 data- tle baidu min 解析 sea.js //關於 underscore 中模板引擎的應用演示樣例 <

python中模板引擎Jinja2學習

1.Jinja2        Jinja2是基於python的模板引擎，功能比較類似於於PHP的smarty，J2ee的Freemarker和velocity。 它能完全支援unicode，並具有整合的沙箱執行環境，應用廣泛。使用Jinja2的方式一般是，先建立一個包括{

layui資料表格隱藏列的辦法

在使用layui做資料表格的時候，插入的資料的id是不是一組連續的數字，那麼就需要用到layui的cols的type屬性。 table.render({ elem: '#test' ,url:'${pageContext.request.context

layui資料表格資料字典轉換實現

前言 專案中使用了賢心大大的layui(零門檻開箱即用的前端UI解決方案),但是目前缺失資料表格資料字典的轉換功能（本人是沒找到），以下是解決方法：延用layui中的laytpl模版引擎。 1.下載dwr的依賴包 <dependency> &

layui資料表格 JS+PHP搜尋框查詢

layui資料表格 搜尋框查詢 先來張效果圖，主要寫搜尋框 程式碼： CSS程式碼，需要引入layui.css跟layui.js，怎麼引入我就不多說了 <div class="chu" style="margin-top:30px">

LayUI資料表格

自用LayUI資料表格資料轉換 package com.util; import java.util.List; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jacks

實現ssm加layui資料表格展示資料，搜尋，編輯，分頁（後臺用pagehelper），排序，檢視圖片 ，點選檢視大圖（彈出層）

之前的方法檢視大圖有bug現在換了個方法，修改後就可以了，有問題請留言 先上圖 整個頁面用的都是layui外掛。 頁面有資料展示（帶分頁），顯示圖片，檢視圖片大圖，編輯資料實時更新。搜尋功能帶分頁。 引入layui.css，layui.js 2個檔案，檔案自行到官網下

layui資料表格時間戳轉換為時間格式的方法

<script type="text/javascript"> function createTime(v){ var date = new Date(v); var y = da

layui 資料表格的過載問題

<button class='layui-btn' onclick='search()'>搜尋</button>dicTable = table.render({   //渲染表格})//表格過載dicTable.reload({    page:{

layUI-資料表格

挺棒的，這是官網文件： 這是我自己用的效果： HTML： <div th:include="/common/header :: html"></div> <div class="layui-body"> <!-- 內容

layui 資料表格的前後端互動

前端jsp的頁面<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.g

layui資料表格自定義資料項

layui是一個很適合後臺開發人員用的一個前端框架,介面簡潔，功能豐富。 大家知道,系統一般都有資料表格及分頁功能，尤其在後臺管理系統之類，這類場景更是很多，layui也為我

Layui資料表格動態新增行的處理方式（原生HTML方式）

專案需求：動態的增加表格行資料，並且單元格允許支援下拉框。 解決步驟： 1、編寫表格頭部內容 <hr class="l

Layui資料表格 加入 自定義擴充套件方法(重新渲染Render當前頁資料)

具體開發中遇到的問題如下， 資料表格內的 內容 通過 table.cache["SampleList"] 修改後，重新渲染或重新載入會導致當前操作的分頁 和 配置被清空。我修改了第5頁第X行的X列值，重新渲染後就回到了最原始第1頁或重新呼叫了介面。 Layui 官方提供的文件 提供的重新整理表格方法有幾種

使用sqoop將資料從hdfs中匯入mysql時，卡在INFO mapreduce.Job: map 100% reduce 0%的解決辦法

最近在將hdfs中已經處理好的資料匯入到mysql的時候遇到這麼一個現象，當任務執行到 INFO mapreduce.Job: map 100% reduce 0% mapreduce任務卡在map100% ，任何reduce不繼續執行。 總結了以下解決辦法： 一，如果沒

自己實現的資料表格控制元件（dataTable），支援自定義樣式和標題資料、ajax等各種自定義設定以及分頁自定義

一、前言 也沒什麼好說的嘛，用了蠻多github上開源的能夠實現dataTable功能的表格外掛，不過都預設繫結樣式啊，資料格式也設定的比較死，所以忍不住自己實現了一個簡單的可自定義樣式和自定義資料返回格式的資料表格外掛，原生js是保留的，後面如果更新新版本的話會去除對jq

js中模板化開發，text/template

JavaScript標籤中有時候會看見<script type="text/tmplate" >,大概就是一個放置模板的地方,而這些東西並不顯示在頁面,我們暫且就把它當成一個容器.百度查了一下也沒查到怎麼個用法,所以自己就寫了一下程式碼,以便應用這些模板內容。 我們舉個例子,在script標籤中