摘要:在前一篇,的客戶端分頁解決方案中留下了一個問題如果前三頁只需要加載一次數據,采用客戶端分頁,之后的每一頁都仍然從服務器獲取,應該怎么辦現在就來改造,讓它實現這個功能。所以正確的解決辦法是試驗一下就能證明它的正確性。
在前一篇,miniui datagrid 的客戶端分頁解決方案 中留下了一個問題:如果前三頁只需要加載一次數據,采用客戶端分頁,之后的每一頁都仍然從服務器獲取,應該怎么辦?
現在就來改造 ClientPagination,讓它實現這個功能。不過在此之前需要先解決上個版本中存在的一個問題:destroy() 并沒有完全恢復原有的 datagrid 對象,因為忘了在 destroy() 中恢復 this._datagrid 的 load 和 setData 函數。
修復一個重要的 BUG很容易想到下面的代碼,不過下面這個代碼是個錯誤的實現
destroy() { // 錯誤的實現 METHODS.forEach(name => { this._datagrid[name] = this._origin[name]; }); // .... }
別忘了 this._origin 中保存的每個函數都是通過原函數 bind() 而來,所以其實已經不是原函數了。此外,也很容易想到 miniui 的 datagrid 多半是類實現,原來的 load() 和 setData() 應該來源于原型。所以正確的解決辦法是
// in destroy"s body METHODS.forEach(name => { delete this._datagrid[name]; });
試驗一下就能證明它的正確性。
改造 ClientPagination 修改 beforeload 事件處理原來在 beforeload 事件中直接設置了 event.cancel = true 來避免遠程加載,但現在情況發生了變化,只需要在頁碼小于3(miniui 的 pageIndex 是從 0 開始)避免遠程加載,大于等于 3 的時候仍然需要從服務器獲取頁面數據,所以
const pageIndex = e.data.pageIndex; if (pageIndex < 3) { e.cancel = true; } else { // 直接返回,不需要通過 setPageData() 來設置頁面數據 return; }接下來該干啥
接下來還有一些細節需要處理。
首先就是 setData 中沒有使用數據的 total 值,因為原來純客戶端分頁的時候,數據總行數就是 total 值,但現在不一樣了,設置的數據不一定是所有數據,所以需要先檢查 total,如果沒有 total 再使用 rows.length 代替。
setData(data) { const rows = Array.isArray(data) ? data : (data.data || []); this._data = rows; this._total = data.total || rows.length; this.setPageData(this._datagrid.getPageIndex(), this._datagrid.getPageSize()); }
相應的,還需要在 setPageData() 里修改一個 setTotalCount() 的實參
grid.setTotalCount(this._total);
搞定!
源代碼 ClientPagination mini_clientpagination.jsconst METHODS = ["setData", "load"]; class ClientPagination { static wrap(datagrid) { return new ClientPagination(datagrid); } constructor(datagrid) { this._datagrid = datagrid; this._origin = {}; this.setup(); } setup() { const grid = this._datagrid; const origin = this._origin = {}; METHODS.forEach(name => { // 綁定到原對象的原方法 origin[name] = grid[name].bind(grid); // 替換為本類中定義的新方法 grid[name] = this[name].bind(this); }); // 暫存事件處理函數,以便后面注銷 this._onBeforeLoad = this.onBeforeLoad.bind(this); grid.on("beforeload", this._onBeforeLoad); } destroy() { // 恢復原方法(來自 datagrid 類的 prototype) // 只需要刪除附加到對象上的同名方法即可 METHODS.forEach(name => { delete this._datagrid[name]; }); this._origin = {}; this._datagrid.un("beforeload", this._onBeforeLoad); this._datagrid = null; } onBeforeLoad(e) { // 根據官方的解決方案而來 const pageIndex = e.data.pageIndex; if (pageIndex < 3) { e.cancel = true; } else { // NOTE 一般來說不需要修改 url,直接通過 pageIndex 參數即可從后臺獲取不同頁的數據 // 這里因為是用的靜態 JSON 數據,所以需要修改 url e.url = `data/page${pageIndex}.json`; return; } let pageSize = e.data.pageSize; this.setPageData(pageIndex, pageSize); } load(params, success, fail) { const grid = this._datagrid; const pageIndex = grid.getPageIndex(); const url = grid.getUrl(); params = $.extend(pageIndex < 3 ? {} : { pageIndex: pageIndex, pageSize: grid.getPageSize() }, params); const settings = { type: "get", dataType: "json", data: params }; $.ajax(url, settings) .then(data => { this.setData(data); if (typeof success === "function") { success(data); } }, () => { if (typeof fail === "function") { fail(); } }); } setData(data) { const rows = Array.isArray(data) ? data : (data.data || []); this._data = rows; this._total = data.total || rows.length; this.setPageData(this._datagrid.getPageIndex(), this._datagrid.getPageSize()); } setPageData(pageIndex, pageSize) { const allData = this._data; let start = pageIndex * pageSize; if (start >= allData.length) { start = 0; pageIndex = 0; } const end = Math.min(start + pageSize, allData.length); const pageData = []; for (let i = start; i < end; i++) { pageData.push(allData[i]); } const grid = this._datagrid; grid.setTotalCount(this._total); grid.setPageIndex(pageIndex); grid.setPageSize(pageSize); this._origin.setData(pageData); } }測試頁面 index.html
Client Pagination 序號名稱
當然還有 data 目錄下的數據源 all.json 和 page3.json
all.json 中是前3頁的數據
page3.json 中是第4頁的數據
數據結構(僅結構
{ "data": [], "total": 50 }
其中 data 的每一項結構
{ "order": 1108, "name": "bridge" }
完整的測試數據就自己拼吧,當然最好是還是用服務端數據,通過參數來返回不同的數據行。
我懶,懶得為了個實驗還去寫服務端
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91056.html
摘要:官方的解決方案展示了客戶端分頁解決方案的基本思想,但是這個示例太過簡單。原來是向設置了需要顯示的所有數據行,不管分頁比如可以一次顯示出來條數據而現在,如果設置的數據量過大,則需要通過客戶端分頁來逐頁顯示。 官方的解決方案 官方在在線示例中給了一個簡單的 client pagination 解決方案,代碼就不貼了,這里說說它的基本思想和處理過程。 首先,是綁定一個 preload 事件,...
摘要:表格的刷新保留查詢條件的刷新當前分頁的數據更新,請使用也可以使用獲取當前接口請求的參數。 本期我們要講述一下最常見的布局————表格:如何引入datagrid組件(在文章的末尾)來個demo,調用的代碼 let options = { container:.con,//表格的容器 paging:{//分頁的相關配置,其他參數配置參考[諾諾組件之分頁(舊版)][1] ...
摘要:是一個基于的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置實現數據請求,減少前端重復開發的工作。 fsLayui 是一個基于layui的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置html實現數據請求,減少前端js重復開發的工作。 GitHub下載 碼云下載 測試環境地址:http://fslayui.itcto.cn css和js引用 公...
摘要:是一個基于的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置實現數據請求,減少前端重復開發的工作。 fsLayui 是一個基于layui的快速開發插件,支持數據表格增刪改查操作,提供通用的組件,通過配置html實現數據請求,減少前端js重復開發的工作。 GitHub下載 碼云下載 測試環境地址:http://fslayui.itcto.cn css和js引用 公...
摘要:什么是是一種基于和的用戶界面插件集合。為創建現代化,互動,應用程序,提供必要的功能。是個完美支持網頁的完整框架。很簡單但功能強大的。返回則取消該動作。該函數有下列參數要傳遞到遠程服務器的參數對象。當檢索數據成功時調用的回調函數。 什么是easyUI easyui是一種基于jQuery、Angular.、Vue和React的用戶界面插件集合。easyui為創建現代化,互動,JavaScr...
閱讀 961·2021-11-24 09:39
閱讀 3383·2021-10-27 14:20
閱讀 2322·2019-08-30 14:08
閱讀 3361·2019-08-29 16:34
閱讀 2177·2019-08-26 12:14
閱讀 2104·2019-08-26 11:54
閱讀 2772·2019-08-26 11:44
閱讀 2474·2019-08-26 11:38