需求：最近公司有個功能需要查詢后台數據在前台展示，展示的行頭會根據后台的數據顯示數據（如數據中的一個環節list，不同的數據這個list長度不一樣），還要分頁展示；
一下是源碼：
function loadGrid(){
if(!$("#queryForm").form('validate')) {//判斷查詢參數是否為空
return false;
}
var paramData = $('#queryForm').serializeJson();//獲取參數
showPanelRefreshTip("#segmentDetailsDiv");//查詢提示
$.ajax({
type : 'POST',
dataType : "json",
url : contextPath + queryRouteNewUrl,
data : paramData,
//contentType : 'application/x-www-form-urlencoded',
//processData : false,//此處一定要注意，如果是false有可能后台獲取不到參數
//traditional : true,
success : function(data,success) {
hidePanelRefreshTip("#segmentDetailsDiv");
var columns;
if (success == 'success' && data.success == true && data.rows){
columns = getMainLineBaseInfoColumns(data.maxSize);//動態拼接行頭
$('#routeGrid').datagrid({//表格
singleSelect : true,
pagination : true,//開啟分頁
pagePosition : 'bottom',//翻頁顯示在底部
columns : [columns],
rownumbers : true//顯示序號
}).datagrid('loadData',data.rows.slice(0,10));//加載數據顯示10條數據
var pager = $("#routeGrid").datagrid("getPager"); //獲取表格
pager.pagination({
total:data.total, //總數據條數
onSelectPage:function (pageNo, pageSize) { //翻頁
var start = (pageNo - 1) * pageSize;
var end = start + pageSize;
$('#routeGrid').datagrid("loadData", data.rows.slice(start, end));
pager.pagination('refresh', {
total:data.total,
pageNumber:pageNo
});
}
});
}else {
showInfoMsg('沒有查詢到路由信息');
}
},
error : function(){
hidePanelRefreshTip("#segmentDetailsDiv");
showErrorMsg('查詢路由信息錯誤!');
}
});
}
動態拼接行頭：
function getMainLineBaseInfoColumns(maxSizeProperty) {
var mainLineBaseInfoColumns =[
{field : 'routeVersion',align : 'center',width : 80,title : '路由版本日期'},
{field : 'deliverTimePeriodDesc',align : 'center',width : 80,title : '寄件時間歸段'},
{field : 'startCity',align : 'center',width : 80,title : '始發城市'},
{field : 'startBatchCode',align : 'center',width : 80,title : '始發班次編碼'},
{field : 'destCity',align : 'center',width : 80,title : '目的城市'},
{field : 'destBatchCode',align : 'center',width : 80,title : '目的地班次編碼'},
{field : 'productType',align : 'center',width : 80,title : '產品類型'},
{field : 'keyConveyance',align : 'center',width : 80,title : '關鍵運力類型'},
{field : 'costTime',align : 'center',width : 80,title : '總耗時'},
{field : 'routeEffectTm',align : 'center',width : 80,title : '靜態時效'},
{field : 'effectPeriodDay',align : 'center',width : 80,title : '靜態時效歸段'},
{field : 'promiseTime',align : 'center',width : 80,title : '承諾時效'},
{field : 'effectReach',align : 'center',width : 80,title : '時效是否達成'},
{field : 'routeType',align : 'center',width : 80,title : '路由類型'},
{field : 'workDay',align : 'center',width : 80,title : '適應工作日'}];
for (var i = 0; i < maxSizeProperty; i++) {//重點是這里的，跟據后台的數據拼接顯示行頭
var column = {};
column["field"] = "segment" + (i+1);
column["align"] = "center";
column["width"] = 80;
column["title"] = "環節"+(i+1);
mainLineBaseInfoColumns.push(column);
}
return mainLineBaseInfoColumns;
}
效果圖：
遺留問題：如果后台有50條數據，50條數據中最大環節數如果是第25條數據的20環；在展示1-10的數據時，這10條數據中最大環節如果只有15環，拼接出來的行頭永遠是25環，展示1-10的數據時就會有5個多余的空格列，其它頁面也有此問題；
只有展示20-30的數據時才是最合適的。