laydate日期元件的使用和Bootstrap Table表格神器的使用學習心得
####laydate：Layui框架下的日期元件
####Bootstrap Table：基於 Bootstrap 的 jQuery 表格外掛，通過簡單的設定，就可以擁有強大的單選、多選、排序、分頁，以及編輯、匯出、過濾（擴充套件）等等的功能
#####使用文件：
專案中出現了新需求，模組搜尋條件中的日期條件需要進行預設設定，在每次請求當前模組頁面時，所查詢的資料列表的日期條件為當前日期。
當然，這對於精通JS的童鞋，幾乎就是撓癢癢的需求，我一個前端戰五渣，也需要做一點前端的操作，包括之前的微信資訊接收請求，也是對自己只是的補充吧，話說最近也有了學習beetl的想法，關於這個JS吧，還是需要學習一下的。
請求步驟
請求由Controller接收：/productBasicInfo，返回的是一個html頁面。
/**
* 跳轉到產品基礎資訊首頁
*/
@RequestMapping("")
public String index() {
return PREFIX + "productBasicInfo.html";
}
這裡的頁面是一個div塊，頁面被分隔成三部分，模組頁面部分都被嵌入到_container.html中。
日期條件： <div class="col-sm-2"> <#TimeCon id="beginTime" name="開始日期" isTime="false" pattern="YYYY-MM-DD"/> </div> <div class="col-sm-2"> <#TimeCon id="endTime" name="結束日期" isTime="false" pattern="YYYY-MM-DD" /> </div> 這裡需要說一下這個<#TimeCon>，這是一個時間查詢的條件標籤，已封裝好的模組。 @/* 時間查詢條件標籤的引數說明: name : 查詢條件的名稱 id : 查詢內容的input框id isTime : 日期是否帶有小時和分鐘(true/false) pattern : 日期的正則表示式(例如:"YYYY-MM-DD") @*/ <div class="input-group"> <div class="input-group-btn"> <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">${name} </button> </div> <input type="text" class="form-control layer-date" onclick="laydate({istime: ${isTime}, format: '${pattern}'})" id="${id}"/> </div>
看到這裡相信你就明白了，封裝好的時間查詢條件標籤原面目，由於採用的時間元件是laydate，這個時間元件是Layui的一個元件，詳情可看Layui官方文件：https://www.layui.com/doc/modules/laydate.html
主角1號：laydate舊版本的部分API：
核心方法:laydate(options)
options是一個物件，它包含了以下key: '預設值' elem: '#id', //需顯示日期的元素選擇器 event: 'click', //觸發事件 format: 'YYYY-MM-DD hh:mm:ss', //日期格式 istime: false, //是否開啟時間選擇 isclear: true, //是否顯示清空 istoday: true, //是否顯示今天 issure: true, 是否顯示確認 festival: true //是否顯示節日 min: '1900-01-01 00:00:00', //最小日期 max: '2099-12-31 23:59:59', //最大日期 start: '2014-6-15 23:00:00', //開始日期 fixed: false, //是否固定在可視區域 zIndex: 99999999, //css z-index choose: function(dates){ //選擇好日期的回撥 ... }
其他常用方法：
/*
layer.now支援多型別引數。timestamp可以是前後若干天，也可以是一個時間戳。format為日期格式，為空時則採用預設的“-”分割。
如laydate.now(-2)將返回前天，laydate.now(3999634079890)將返回2096-09-28
*/
layer.now(timestamp, format); //該方法提供了豐富的功能，推薦靈活使用。
laydate.reset(); //重設日曆控制元件座標，無參，一般用於頁面dom結構改變時。
在需要實現的功能上便採用了上述API中的內容。
改造productBasicInfo.html
方法上採用了內部JS方式，廢話不多說，上程式碼：
<script type="text/javascript">
//按照上述的核心方法建立物件：options
var begin = {
elem:'#beginTime',
format:'YYYY_MM_DD',
max:laydate.now(),
istime: false,
istoday: false,
choose: function (datas) {
end.min = datas; //開始日選好後，重置結束日的最小日期
end.start = datas //將結束日的初始值設定為開始日
}
};
var end = {
elem:'#endTime',
format: 'YYYY-MM-DD',
max: laydate.now(),
istime: false,
istoday: false,
isclear: true,
issure: true,
choose: function (datas) {
begin.max = datas; //結束日選好後，重置開始日的最大日期
}
};
//核心方法呼叫，載入物件。
laydate(begin);
laydate(end);
//給input設定初始預設值，時間差為30天，參照上述常用方法laydate.now()。
$('#beginTime').val(laydate.now(-30, 'YYYY-MM-DD'));
$('#endTime').val(laydate.now(0, 'YYYY-MM-DD'));
</script>
上述程式碼，在查閱文件後，分解開來並沒有很難理解，完全參照文件進行的操作。
到現在，已經實現了日期的預設值配置，也配置了日期物件begin、end的相關屬性和回撥方法。接下來需要進行的是將預設好的預設日期引數傳入Controller中。
在productBasicInfo.html中程式碼底部存在一個外部JS引入，這也就是我們的突破口。
<script src="${ctxPath}/static/modular/infoMgr/productBasicInfo/productBasicInfo.js"></script>
進入productBasicInfo.js：頁面返回後便會呼叫該外部JS
預設載入方法：
$(function () {
var defaultColunms = ProductBasicInfo.initColumn();
var table = new BSTable(ProductBasicInfo.id, "/productBasicInfo/list", defaultColunms);
table.setPaginationType("client");
//這裡是要新增自定義引數的哦！！！
ProductBasicInfo.table = table.init();
});
我們進行逐行分析：
基礎物件建立：ProductBasicInfo
/**
* 產品基礎資訊管理初始化
*/
var ProductBasicInfo = {
id: "ProductBasicInfoTable", //表格id
seItem: null, //選中的條目
table: null,
layerIndex: -1,
};
var defaultColunms = ProductBasicInfo.initColumn();
呼叫ProductBasicInfo物件的初始化列方法：
/**
* 初始化表格的列
*/
ProductBasicInfo.initColumn = function () {
return [
{field: 'selectItem', radio: true},
{title: 'Id', field: 'Id', visible: false, align: 'center', valign: 'middle'},
{title: '產品編號', field: 'productID', visible: true, align: 'center', valign: 'middle'},
...
];
};
var table = new BSTable(ProductBasicInfo.id, “/productBasicInfo/list”, defaultColunms);
建立了一個名為table的BSTable物件，引數為當前ProductBasicInfo物件的id屬性、請求路徑、上文中建立的預設列物件。
我們進入BSTable中一探究竟，這就是我們今天的主角2號：bootstrap-table-object.js
這也是已封裝好的JS模組，由於篇幅過長，這裡就不完整展示了，只展示針對我們功能實現相關的方法和屬性配置。
主角2號：BSTable物件定義
var BSTable = function (bstableId, url, columns) {
this.btInstance = null; //jquery和BootStrapTable繫結的物件
this.bstableId = bstableId;
this.url = Feng.ctxPath + url;
this.method = "post";
this.paginationType = "server"; //預設分頁方式是伺服器分頁,可選項"client"
this.columns = columns;
this.data = {};
this.queryParams = {}; // 向後臺傳遞的自定義引數
..
};
針對請求引數可以得出：bstableId、url、columns引數作為物件初始化使用，這不是就是構造器嗎？
我們首先看到init()初始化方法：BSTable.prototype [prototype 屬性使您有能力向物件新增屬性和方法]。
BSTable.prototype = {
/**
* 初始化bootstrap table
*/
init: function () {
var tableId = this.bstableId;
var me = this;
this.btInstance = ...(見下文)
return this;
},
/**
* 向後臺傳遞的自定義引數
* @param param
*/
setQueryParams: function (param) {
this.queryParams = param;
},
/**
* 設定分頁方式：server 或者 client
*/
setPaginationType: function (type) {
this.paginationType = type;
},
...
}
this.btInstance：jquery和BootStrapTable繫結的物件
this.btInstance =
$('#' + tableId).bootstrapTable({
contentType: "application/x-www-form-urlencoded",
url: this.url, //請求地址
method: this.method, //ajax方式,post還是get
ajaxOptions: { //ajax請求的附帶引數
data: this.data
},
pagination: true, //是否顯示分頁（*）
pageNumber: 1, //初始化載入第一頁，預設第一頁
pageSize: 14, //每頁的記錄行數（*）
pageList: [14, 50, 100], //可供選擇的每頁的行數（*）
queryParamsType: 'limit', //預設值為 'limit' ,在預設情況下 傳給服務端的引數為：offset,limit,sort
queryParams: function (param) {
return $.extend(me.queryParams, param);
}, // 向後臺傳遞的自定義引數
sidePagination: this.paginationType, //分頁方式：client客戶端分頁，server服務端分頁（*）
...
});
初始化方法中所提及的引數初始化(這裡只保留了主要屬性)，需要特別注意的有兩條：queryParamsType、queryParams。
1. queryParamsType：預設引數limit，後臺引數為offset、limit、sort
這些引數都是對資料分頁所需要的引數：相關資料分頁的引數配置：pagination、pageNumber、pageSize、pageList等，分頁配置中還有一個設定方法：setPaginationType，上述已經提到了。
分頁方式：
client客戶端分頁：BootStrapTable中設定的分頁，前端分頁，配置如上文所述。
server服務端分頁：Mybatis的PageHelper分頁外掛、Mybatis-plus的Page物件都可以實現對資料結果集resultSet的分頁。
2. queryParams：向後臺傳遞的自定義引數
這個屬性使我們所需要的，我們的目的是向後臺傳遞預設時間引數。
設定方法：setQueryParams()
在BSTable物件建立的時候：this.queryParams = { };
初始化init方法中this.btInstance裡的配置：
queryParams: function (param) {
return $.extend(me.queryParams, param);
}, // 向後臺傳遞的自定義引數
結論：自定義引數需要通過setQueryParams()方法進行配置，配置完成後，將作為BSTable的物件屬性進行初始化。
改造productBasicInfo.js：在預載入方法中，BSTable物件建立後新增自定義引數的配置程式碼。
//向後臺傳遞預設的開始、結束時間引數
table.setQueryParams({'beginTime': $("#beginTime").val()});
table.setQueryParams({'endTime': $("#endTime").val()});
table.setPaginationType(“client”);
設定分頁方式為：客戶端分頁，上文中已經提到。
ProductBasicInfo.table = table.init();
所需屬性設定完成後，開始進行table物件的初始化。
至此，日期預設值設定、laydate物件配置、自定義引數傳遞設定已經全部完成，主要涉及的技術為Layui的laydate日期元件的使用和BootStrapTable的實現配置以及初始化封裝JS的配置。
關於JS等前端技術的學習，需要深入去了解。此文作為前端技術的開篇，戰五渣還是需要繼續努力啊！