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等前端技术的学习，需要深入去了解。此文作为前端技术的开篇，战五渣还是需要继续努力啊！