需求：最近公司有个功能需要查询后台数据在前台展示，展示的行头会根据后台的数据显示数据（如数据中的一个环节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的数据时才是最合适的。