1. 程式人生 > >MiniUI前臺分頁,假分頁實現源碼

MiniUI前臺分頁,假分頁實現源碼

MiniUI 假分頁

背景

對於數據較少,無需後臺分頁的需求,可使用以下解決方案


方案

MiniUI提供了監聽事件,特別方便即可實現。


源碼

mini.parse();
var grid = mini.get("datagridTable");
        // 獲取所有數據和總記錄數 { total: 100, data: [...] }
        var dataResult = {};
        dataResult.total = ret.length;
        dataResult.data = ret;
        // 監聽分頁前事件,阻止後自行設置當前數據和分頁信息
        grid.on("beforeload", function (e) {
            e.cancel = true;
            var pageIndex = e.data.pageIndex, pageSize = e.data.pageSize;
            fillData(pageIndex, pageSize, dataResult, grid);
        });
        // 第一次設置
        fillData(0, grid.getPageSize(), dataResult, grid);
        
// 分頁填充細節處理
function fillData(pageIndex, pageSize, dataResult, grid) {
    
    var data = dataResult.data, totalCount = dataResult.total;

    var arr = [];
    var start = pageIndex * pageSize, end = start + pageSize;
    for (var i = start, l = end; i < l; i++) {
        var record = data[i];
        if (!record) continue;
        arr.push(record);
    }
    

    grid.setTotalCount(totalCount);
    grid.setPageIndex(pageIndex);
    grid.setPageSize(pageSize);

    grid.setData(arr);
}

結束

以上代碼,填充後臺數組json即可完成前臺分頁。


MiniUI前臺分頁,假分頁實現源碼