easyui datagrid 生成動態列後 實現分頁

洪小燈發表於2016-01-17
UI

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

這兩個事件並沒有多大的不同，查詢時間多了一個獲取動態列的事件。

實際上這個方法還沒有得到完善，很有可能會出現不是想要的資料。



相關文章