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