easyui datagrid關於分頁的問題


easyui框架中datagrid可以很好的來展示大量的列表數組,但是由於datagrid一般都是從控件本身傳遞一個頁碼給后台,后台進行處理。

但是,最近項目跟webgis有關,數據查詢直接是從服務中查詢出來,無法像關系數據庫那樣,在數據庫端對查詢結果進行分頁

所以,采用在datagrid的前端進行“假分頁”來達到分頁效果

【1】分頁操作

///easyui前台分頁操作
function pagerFilter(data){
    if (typeof data.length == 'number' && typeof data.splice == 'function') {   // is array  
        data = {
            total: data.length,
            rows: data
        }
    }
    var dg = $(this);
    var opts = dg.datagrid('options');
    var pager = dg.datagrid('getPager');
    pager.pagination({
        onSelectPage: function (pageNum, pageSize) {
            opts.pageNumber = pageNum;
            opts.pageSize = pageSize;
            pager.pagination('refresh', {
                pageNumber: pageNum,
                pageSize: pageSize
            });
            dg.datagrid('loadData', data);
        }
    });
    if (!data.originalRows) {
        data.originalRows = (data.rows);
    }
    var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
    var end = start + parseInt(opts.pageSize);
    data.rows = (data.originalRows.slice(start, end));
    return data;
}

【2】在datagrid進行數據綁定時,綁定上分頁方法即可
///初始化項目列表
function InitProjectTab(data) {
    debugger;
    $("#ProjectTab").datagrid({ loadFilter: pagerFilter }).datagrid({
        title: '項目列表',
        //url: '',
        data:data,
        method: 'POST',
        width: 600,
        height: 500,
        singleSelect: true,
        autoRowHeight: false,
        checkOnSelect: true,
        selectOnCheck: true,
        nowrap: false, //是否換行,True 就會把數據顯示在一行里
        striped: true, //True 奇偶行使用不同背景色
        sortOrder: 'desc', //排序類型
        remoteSort: true, //定義是否從服務器給數據排序
        fitColumns: true,
        columns: [[
                  {
                      title: 'OBJECTID', field: 'OBJECTID', width: 40, sortable: true,hidden:true
                  },
                 {
                     title: '項目ID', field: 'PRJID', width: 40, sortable: true
                 },
                {
                    title: '項目名稱', field: 'PRJNAME', width: 100, sortable: true
                },
                 {
                     title: '項目地址', field: 'FADDRESS', width: 80, sortable: true
                 },
                  {
                      title: '建設單位', field: 'FCOMPANY', width: 80, sortable: true
                  },
        ]],
        queryParams: { "action": "query" },
        pagination: true, //是否開啟分頁
        pageNumber: 1, //默認索引頁
        pageSize: 10, //默認一頁數據條數
        rownumbers: true,//行號
        toolbar: '#projectBar',
        onLoadSuccess: function (data, param) {
            $("#projectBtn").fadeIn(100);
            $("#projectDiv").css("right", "20px");
        },
        onClickRow: function (index, row) {
           ShowRedLine(row.OBJECTID);   //定位圖形 
        }
    });
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM