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);
        }
    });
}

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

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