easyui datagrid 生成动态列后 实现分页

easyui是一个比较简单的前端框架，相比Extjs有很大的性能提升，但是对很多处理来说easyui支持的不是很好

下面介绍datagrid动态列生成之后如何实现分页

easyui datagrid不支持原生事件来动态修改列，只支持修改列属性，如果要动态生成列只能设置datagrid的options，但是这样设置以后以前设置的数据属性和绑定的事件都会被重置，绑定的分页事件也会重置，这个时候要分页事件是不能被触发的。

要解决这种问题就要给datagrid绑定重新绑定事件，一般情况下分页事件是和查询事件绑定在一起的，没事分页的时候都会触发动态列的重置，只要将这两个事件分开处理就行了。

例如一下的例子：

function dataSnapQuery(pageNumber, pageSize) {
var ids = getAllSelectedPoint();
if (ids.length < 1) {
alert('请选择点');
return;
}
var names = getAllSelectedName();
var idSet = getAllSelectedPointSet();
var pageopt = $('#dataSnapTable').datagrid('getPager').data("pagination").options;
if (!pageNumber) {
pageNumber = 1;
}
if (!pageSize) {
pageSize = pageopt.pageSize;
if (pageSize) {
pageSize = 15
}
}
var beginTime = $('#snapBegin').datetimebox('getValue');
var endTime = $('#snapEnd').datetimebox('getValue');
beginTime = new Date(beginTime).getTime();
endTime = new Date(endTime).getTime();
var interval = $('#dataSnap').textbox('getValue') * 1000;
var snapSelectEU = $('#snapSelectEU').combobox('getValue');
switch (snapSelectEU) {
case 'second':
interval *= 1;
break;
case 'minute':
interval *= 60;
break;
case 'hour':
interval *= 3600;
break;
case 'day':
interval *= 86400;
break;
default :
interval *= 1;
break;
}

var hisType = $('#valueType').combobox('getValue');
//查询采样值
if (hisType == 'RAW') {
if (interval != 1000 || snapSelectEU != 'second') {
alert('查询采样值时，区间必须是1秒');
$('#dataSnap').textbox('setValue', '1');
$('#snapSelectEU').combobox('setValue', 'second');
return;
}
}
//查询统计值
if (hisType == 'AVG' || hisType == 'MAX' || hisType == 'MIN' || hisType == 'FLOW') {
if (interval == 1) {
alert('查询统计值时，区间必须大于1秒');
return;
}
}
//如果是 平均值、最大值、最小值、流量值
if (hisType == 'MIN' || hisType == 'MAX' || hisType == 'AVG' || hisType == 'FLOW') {
if (interval == 1) {
alert('当查询统计值时,时间间隔必须大于1秒');
return;
}
}
$.ajax({
url: 'historyData_getPointsDesc',
method: 'post',
async: false, // 同步请求数据
data: $.param({
PNS: idSet
}, true),
dataType: 'json',
success: function (dataPar) {
var pointsDesc = dataPar['pointsDesc'];
$.ajax({
type: 'post',
url: 'historyData_getHistoryEx',
data: {
from: beginTime,
to: endTime,
interval: interval,
historyTypeFG: hisType,
pn: ids,
start: (pageNumber - 1) * pageSize,
limit: pageSize
},
dataType: 'json',
success: function (data) {
var namesFiled = pointsDesc;
var columns = new Array();
var column = {};
column["title"] = '时间';
column["field"] = 'time';
column["width"] = 150;
columns.push(column);
if (namesFiled) {
$.each(namesFiled, function (i, name) {
var column = {};
column["title"] = names[i];
column["field"] = 'pn' + i;
column["width"] = 120;
columns.push(column);
});
}
$('#dataSnapTable').datagrid({
columns: [
columns
]
});
var p = $('#dataSnapTable').datagrid('getPager');
$(p).pagination({
pageSize: pageSize,
pageList: [15, 30, 50, 80, 100],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页    共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
onSelectPage: function (pageNumber, pageSize) {
dataSnapPageChange(pageNumber, pageSize);
}
});
$('#dataSnapTable').datagrid('loadData', data);
}
});
}
});
}

这是查询的时候出触发的，点击查询按钮的时候，动态列已经生成了，在分页的时候不会再次生成动态列了，在条件相同的情况下列的属性总是一样的，不一样的是显示第多少条到多少条

分页事件触发函数：

/**
* 动态加载列时，监听页面改变事件
* @param pageNumber
* @param pageSize
*/
function dataSnapPageChange(pageNumber, pageSize) {
var ids = getAllSelectedPoint();
if (ids.length < 1) {
alert('请选择点');
return;
}
var pageopt = $('#dataSnapTable').datagrid('getPager').data("pagination").options;
if (!pageNumber) {
pageNumber = 1;
}
if (!pageSize) {
pageSize = pageopt.pageSize;
if (pageSize) {
pageSize = 15
}
}
var beginTime = $('#snapBegin').datetimebox('getValue');
var endTime = $('#snapEnd').datetimebox('getValue');
beginTime = new Date(beginTime).getTime();
endTime = new Date(endTime).getTime();
var interval = $('#dataSnap').textbox('getValue') * 1000;
var snapSelectEU = $('#snapSelectEU').combobox('getValue');
switch (snapSelectEU) {
case 'second':
interval *= 1;
break;
case 'minute':
interval *= 60;
break;
case 'hour':
interval *= 3600;
break;
case 'day':
interval *= 86400;
break;
default :
interval *= 1;
break;
}

var hisType = $('#valueType').combobox('getValue');
//查询采样值
if (hisType == 'RAW') {
if (interval != 1000 || snapSelectEU != 'second') {
alert('查询采样值时，区间必须是1秒');
$('#dataSnap').textbox('setValue', '1');
$('#snapSelectEU').combobox('setValue', 'second');
return;
}
}
//查询统计值
if (hisType == 'AVG' || hisType == 'MAX' || hisType == 'MIN' || hisType == 'FLOW') {
if (interval == 1) {
alert('查询统计值时，区间必须大于1秒');
return;
}
}
//如果是 平均值、最大值、最小值、流量值
if (hisType == 'MIN' || hisType == 'MAX' || hisType == 'AVG' || hisType == 'FLOW') {
if (interval == 1) {
alert('当查询统计值时,时间间隔必须大于1秒');
return;
}
}
$.ajax({
type: 'post',
url: 'historyData_getHistoryEx',
data: {
from: beginTime,
to: endTime,
interval: interval,
historyTypeFG: hisType,
pn: ids,
start: (pageNumber - 1) * pageSize,
limit: pageSize
},
dataType: 'json',
success: function (data) {
$('#dataSnapTable').datagrid('loadData', data);
}
});
}

这两个事件并没有多大的不同，查询时间多了一个获取动态列的事件。

实际上这个方法还没有得到完善，很有可能会出现不是想要的数据。