EasyUI Datagrid 客戶端分頁詳解

2021-08-13 09:51:44 字數 1123 閱讀 8638

最近在做乙個小型的成績管理系統,需要用到easyui datagrid的分頁功能,考慮到資料量較少(只有乙個班級),於是選擇客戶端分頁。在網上能找到的客戶端分頁demo基本都是同一段**,但沒有注釋,下面是我根據自己的理解和除錯分析寫上的**以及注釋,希望能幫助大家理解easyui datagrid客戶端分頁的執行過程

首先是datagrid初始化**:

pagerfilter函式:

function

pagerfilter

(data)

);//此處loaddata方法會載入本地資料,即data中的資料,data中包含有初次載入的所有資料

dg.datagrid('loaddata',data);

//上述方法執行時會被pagerfilter攔截到,並對初始資料進行篩選,以達到分頁的效果

}});

//真正的分頁邏輯

//第一次進入pagerfilter函式時,data中只有rows中儲存了資料,並無originalrows屬性,實現客戶端分頁時,需要在一開始將這些資料儲存在

//originalrows中,成為後續分頁的基礎資料,所以只要originalrows屬性存在且不為空,分頁時的基礎資料便一直是originalrows中儲存的資料

if(!data.originalrows)

//取出選擇新的頁面時,新頁面的引數,前面已經儲存在opts物件中了

var start =(opts.pagenumber-1)*parseint(opts.pagesize);

var end = start + parseint(opts.pagesize);

//下面對初始資料進行篩選,並將結果放在data.rows中,頁面每次載入時只會顯示data.rows中的資料

data.rows =(data.originalrows.slice(start, end));

//返回data,完成分頁

return data;

}

EasyUI datagrid 使用小結

用了easyui框架一段時間了,這個前端框架用起來還是挺方便的,也有很多現成的控制項,看看官方文件應該還是能比較快用起來的。在這裡記錄一下一些常用的控制項的方法,遇到過的bug或者當初耗了一點時間來實現的功能吧。var pager dg datagrid getpager 獲取分頁 物件 var p...

easyui datagrid 多表頭設定

最近在做二維報表,要求報表的表頭自定義。在網上找了好久二維報表的外掛程式,一直找不到合適的。後來就用easyui 中的datagrid替代了一下。根據實際需求,統計的資訊可能不是乙個模組中的字段資訊,所以需要把模組和模組下的字段都顯示出來,這就用到了 中的合併單元格,但是在datagrid中如何實現...

easyUI datagrid 前端真分頁

前文再續,書接上一回。easyui datagrid 前端假分頁 真分頁是easyui datagrid 的預設方式。所謂真分頁,就是後台傳給前端的資料,真的是分頁後的資料。而假分頁,是全部資料。easyui datagrid 向後台請求資料的時候,會自動將頁號 page 每頁數量 rows 作為引...