laydate⽇期组件的使⽤和BootstrapTable表格神器的使⽤学习⼼得
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>
主⾓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){ //选择好⽇期的回调
...
}
其他常⽤⽅法：
/*
*/
在需要实现的功能上便采⽤了上述API中的内容。
改造productBasicInfo.html
⽅法上采⽤了内部JS⽅式，废话不多说，上代码：
<script type="text/javascript">
//按照上述的核⼼⽅法创建对象：options
var begin = {
elem:'#beginTime',
format:'YYYY_MM_DD',
w(),
istime: false,
istoday: false,
choose: function (datas) {
end.min = datas;  //开始⽇选好后，重置结束⽇的最⼩⽇期
end.start = datas //将结束⽇的初始值设定为开始⽇
}
};
var end = {
elem:'#endTime',
format: 'YYYY-MM-DD',
max: w(),
istime: false,
istoday: false,
isclear: true,
issure: true,
choose: function (datas) {
begin.max = datas; //结束⽇选好后，重置开始⽇的最⼤⽇期
}
};
//核⼼⽅法调⽤，加载对象。
laydate(begin);
laydate(end);
/
/给input设置初始默认值，时间差为30天，参照上述常⽤⽅法w()。
$('#beginTime').w(-30, 'YYYY-MM-DD'));
$('#endTime').w(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/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 = Path + url;
this.paginationType = "server";  //默认分页⽅式是服务器分页，可选项"client"
this.data = {};
this.queryParams = {};                // 向后台传递的⾃定义参数
..
jquery是什么功能组件
};
针对请求参数可以得出：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: hod,  //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()

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。