1.需要的效果如下，
.
2.顯示列根據查詢的日期條件框變化，如圖，一直顯示到7月31日，
3.js代碼table頁面初始化效果如下，
//table初始化
function initDataTable() {
var columns_source = get_columns();
$("#table").bootstrapTable({
src: "",
url: "",
isQueryFirst: false,
sortName: "",
sortOrder: "",
autoHeight: true,
//showFooter: true,
isShowLineNumber: false,
queryParams: function queryParams(params) {
var param = {
"beginDate": $("#beginDate", getElementContext()).val(),
"endDate": $("#endDate", getElementContext()).val()
};
return param;
},
onLoadSuccess: function (data) {
},
columns: columns_source
});
//動態加載列名
function get_columns() {
var weekArray = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var columns_source = [];
var beginDate = $("#beginDate", getElementContext()).val();
var endDate = $("#endDate", getElementContext()).val();
var date_count = GetNumberOfDays(beginDate, endDate);
for (var i = 0; i <= date_count; i++) {
var field = "DAY".concat(i);
var date_add = new Date(beginDate).setDate(new Date(beginDate).getDate() + i);
var date_week = weekArray[new Date(date_add).getDay()];
var date_month = new Date(date_add).getMonth() + 1;
var date_day = new Date(date_add).getDate();
var title = date_week.concat(" ").concat(date_month).concat("月").concat(date_day).concat("日");
var temp = {field: field, title: title, align: "right", valign: "middle", halign: "center"};
columns_source.push(temp);
}
;
return columns_source;
};
}
//date1：開始日期，date2結束日期
function GetNumberOfDays(date1, date2) {//獲得天數
var a1 = Date.parse(new Date(date1));
var a2 = Date.parse(new Date(date2));
//核心：時間戳相減，然後除以天數
var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24));
return day
};
4.日期控件框綁定change事件，爲防止列顯示過長，將日期範圍控制在一個月之內，選擇開始日期選擇上個月，結束日期就爲上個月的最後一天，選擇結束日期爲上個月，開始日期就爲上個月的第一天。
$("#resource_table").bootstrapTable('destroy'); 方法，將原表格銷燬，再重新init()初始化一次即可。
//時間控件觸發
$("#beginDate", getElementContext()).bindChange(function (obj) {
var beginDate = $("#beginDate", getElementContext()).val();
var endDate = $("#endDate", getElementContext()).val();
if (beginDate != "" && endDate != "") {
var yearA = beginDate.substr(0, 4);
var monthA = beginDate.substr(5, 2);
var yearB = endDate.substr(0, 4);
var monthB = endDate.substr(5, 2);
if (yearB != yearA || monthB != monthA || beginDate > endDate) {
$("#endDate", getElementContext()).val(getCurrentMonthLast(beginDate));
}
$("#table", getElementContext()).dataTable().bootstrapTable('destroy');
initDataTable();
}
});
$("#endDate", getElementContext()).bindChange(function (obj) {
var beginDate = $("#beginDate", getElementContext()).val();
var endDate = $("#endDate", getElementContext()).val();
if (beginDate != "" && endDate != "") {
var yearA = beginDate.substr(0, 4);
var monthA = beginDate.substr(5, 2);
var yearB = endDate.substr(0, 4);
var monthB = endDate.substr(5, 2);
if (yearB != yearA || monthB != monthA || beginDate > endDate) {
$("#beginDate", getElementContext()).val(getCurrentMonthFirst(endDate));
}
$("#table", getElementContext()).dataTable().bootstrapTable('destroy');
initDataTable();
}
});
/**
* 獲取當前月的最後一天
* @returns {Date}
*/
function getCurrentMonthLast(d) {
var date = new Date(d);
var currentMonth = date.getMonth();
var nextMonth = ++currentMonth;
var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
var oneDay = 1000 * 60 * 60 * 24;
var lastTime = new Date(nextMonthFirstDay - oneDay);
var month = parseInt(lastTime.getMonth() + 1);
var day = lastTime.getDate();
if (month < 10) {
month = '0' + month
}
if (day < 10) {
day = '0' + day
}
return date.getFullYear() + '-' + month + '-' + day;
}
/**
* 獲取當前月的第一天
* @returns {string}
*/
function getCurrentMonthFirst(d) {
var date = new Date(d);
date.setDate(1);
var month = parseInt(date.getMonth() + 1);
var day = date.getDate();
if (month < 10) {
month = '0' + month
}
if (day < 10) {
day = '0' + day
}
return date.getFullYear() + '-' + month + '-' + day;
}