摘要:官方的解決方案展示了客戶端分頁解決方案的基本思想,但是這個示例太過簡單。原來是向設(shè)置了需要顯示的所有數(shù)據(jù)行,不管分頁比如可以一次顯示出來條數(shù)據(jù)而現(xiàn)在,如果設(shè)置的數(shù)據(jù)量過大,則需要通過客戶端分頁來逐頁顯示。
官方的解決方案
官方在“在線示例”中給了一個簡單的 client pagination 解決方案,代碼就不貼了,這里說說它的基本思想和處理過程。
首先,是綁定一個 preload 事件,在這個事情中設(shè)置 event.cancel = true,阻止 datagrid 在翻頁的時候向服務(wù)器請求加載數(shù)據(jù)。
那么數(shù)據(jù)從哪來呢?當然只有在外部寫一個 ajax 過程獲取了。不過取得的數(shù)據(jù)并不直接交給 datagrid,而是緩存起來,放在 dataResult 中。
現(xiàn)在繼續(xù)說 preload,除了阻止 datagrid 向服務(wù)器請求數(shù)據(jù)之外,preload 還需要從緩存中找到頁碼對應(yīng)的數(shù)據(jù)行,通過 setData 設(shè)置給 datagrid 渲染出來。OK,這個事情是交給自定義函數(shù) fillData 來實現(xiàn)的。當然,這里還要干點與頁面相關(guān)的事情,就是 setTotalCount()、setPageIndex() 和 setPageCount()。
官方的解決方案展示了 miniui datagrid 客戶端分頁解決方案的基本思想,但是這個示例太過簡單。如果,想把之前的服務(wù)端分頁改成客戶端分頁該怎么辦?原來已經(jīng)存在對 load()、setData() 等的調(diào)用,現(xiàn)在怎樣以最小的代碼改動來實現(xiàn)客戶端分頁?
class ClientPagination就上面的問題,首先能想到的,就是保留原有 load() 和 setData() 的接口,但是要改變它們的行為。
load() 原有行為是提交了〔XXX參數(shù)〕,從服務(wù)器加載指定頁的數(shù)據(jù);而現(xiàn)在需要改為加載所有數(shù)據(jù)。
setData() 原來是向 datagrid 設(shè)置了需要顯示的所有數(shù)據(jù)行,不管分頁(比如可以一次顯示出來200條數(shù)據(jù));而現(xiàn)在,如果設(shè)置的數(shù)據(jù)量過大,則需要通過客戶端分頁來逐頁顯示。
JavaScript 語言是動態(tài)有,這使得替換方法成為可能,這是很多靜態(tài)語言做不到的事情。而替換方法也是解決這個問題時最容易想到的辦法。當然除此之外,還得慶幸 miniui 沒有采用 jQuery 擴展的方式(如 $grid.datagrid("setData", ...))來實現(xiàn)組件。
替換方法成為可能,但是原有方法還是得保留,因為我們需要通過原有方法來操作 datagrid。所以 ClientPagination 類應(yīng)該是這個樣子:
ClientPagination 的基本結(jié)構(gòu)注:本文中所有代碼都是 ES6 語法
const METHODS = ["setData", "load"]; class ClientPagination { constructor(datagrid) { this._datagrid = datagrid; this._origin = {}; this.setup(); } setup() { // TODO 暫存 this._datagrid 的 load、setData 等方法 // 并為 this._datagrid 設(shè)置新方法和注冊事件 } destroy() { // TODO 恢復(fù) this._datagrid 的方法,注銷事件 } onBeforeLoad() { // 根據(jù)官方的解決方案而來 e.cancel = true; let pageIndex = e.data.pageIndex; let pageSize = e.data.pageSize; this.setPageData(pageIndex, pageSize); } // 參照 datagrid.load 的函數(shù)簽名 load(params, success, fail) { // TODO 實現(xiàn)加載數(shù)據(jù),并保存到 this._data 中 // 然后調(diào)用 this.setData() 保存和顯示數(shù)據(jù) } setData(data) { // TODO 保存 data 到 this._data 中, // 然后調(diào)用 this.setPageData() 顯示當前頁的數(shù)據(jù) } setPageData(pageIndex, pageSize) { // TODO 從緩存的 this._data 中按 pageIndex 和 pageSize 取出要顯示的數(shù)據(jù)行 // 然后通過 this._origin.setData() 設(shè)置在 datagrid 中 } }設(shè)置和解除客戶端分頁
其中 setup 和 destroy 為分別為 datagrid 綁定和解綁客戶端分頁處理
setup() { const grid = this._datagrid; const original = this._origin = {}; METHODS.forEach(name => { // 暫存原方法 origin[name] = grid[name].bind(grid); // 替換為本類中定義的新方法 grid[name] = this[name].bind(this); }); // 暫存事件處理函數(shù),以便后面注銷 this._onBeforeLoad = this.onBeforeLoad.bind(this); grid.on("beforeload", this._onBeforeLoad); } destroy() { this._origin = {}; this._datagrid.un("beforeload", this._onBeforeLoad); this._datagrid = null; }來自官方示例中的關(guān)鍵代碼
onBeforeLoad 以及 setPageData 是參照官方解決方案中的 beforeload 事件和 fillData 方法寫的。onBeforeLoad 的代碼在上面已經(jīng)有了,現(xiàn)在是 setPageData 的代碼
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(allData.length); grid.setPageIndex(pageIndex); grid.setPageSize(pageSize); this._origin.setData(pageData); }改寫 load
load 方法需要用 ajax 調(diào)用來替換原來的 load 方法
load(params, success, fail) { const grid = this._datagrid; const url = grid.getUrl(); const settings = { type: "post", dataType: "json", data: params || {} }; $.ajax(url, settings) .then(data => { this.setData(data); if (typeof success === "function") { success(data); } }, () => { if (typeof fail === "function") { fail(); } }); }改寫 setData
而 setData 也進行了替換,參數(shù)是整表的數(shù)據(jù),但只能顯示當前頁的數(shù)據(jù)
setData(data) { const rows = Array.isArray(data) ? data : (data.data || []); this._data = rows; this.setPageData(this._datagrid.getPageIndex(), this._datagrid.getPageSize()); }應(yīng)用
為了方便封裝,再加一個靜態(tài)方法
static wrap(datagrid) { return new ClientPagination(datagrid); }
現(xiàn)在只需要在頁面初始化(或其它合適的初始化位置)加上
ClientPagination.wrap(mini.get("datagridId"));
如果需要 destroy,可以這樣
var cpBlabla = ClientPagination.wrap(mini.get("datagridId")); .... cpBalbal.destory();小結(jié)
通過 ClientPagination 的封裝,不需要改變原有的業(yè)務(wù)代碼和設(shè)置,就可以實現(xiàn) miniui datagrid 的客戶端分頁。
但是這個實現(xiàn)只是解決了當前的問題,如果有新的需求:
當頁碼在前三頁的時候用客戶端分頁,以減少數(shù)據(jù)加載次數(shù),翻到后面的時候需要用服務(wù)器端分頁
又該如何?是不是該出個續(xù)集?
續(xù)集在這里
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/91063.html
摘要:在前一篇,的客戶端分頁解決方案中留下了一個問題如果前三頁只需要加載一次數(shù)據(jù),采用客戶端分頁,之后的每一頁都仍然從服務(wù)器獲取,應(yīng)該怎么辦現(xiàn)在就來改造,讓它實現(xiàn)這個功能。所以正確的解決辦法是試驗一下就能證明它的正確性。 在前一篇,miniui datagrid 的客戶端分頁解決方案 中留下了一個問題:如果前三頁只需要加載一次數(shù)據(jù),采用客戶端分頁,之后的每一頁都仍然從服務(wù)器獲取,應(yīng)該怎么辦?...
摘要:表格的刷新保留查詢條件的刷新當前分頁的數(shù)據(jù)更新,請使用也可以使用獲取當前接口請求的參數(shù)。 本期我們要講述一下最常見的布局————表格:如何引入datagrid組件(在文章的末尾)來個demo,調(diào)用的代碼 let options = { container:.con,//表格的容器 paging:{//分頁的相關(guān)配置,其他參數(shù)配置參考[諾諾組件之分頁(舊版)][1] ...
摘要:是一個基于的快速開發(fā)插件,支持數(shù)據(jù)表格增刪改查操作,提供通用的組件,通過配置實現(xiàn)數(shù)據(jù)請求,減少前端重復(fù)開發(fā)的工作。 fsLayui 是一個基于layui的快速開發(fā)插件,支持數(shù)據(jù)表格增刪改查操作,提供通用的組件,通過配置html實現(xiàn)數(shù)據(jù)請求,減少前端js重復(fù)開發(fā)的工作。 GitHub下載 碼云下載 測試環(huán)境地址:http://fslayui.itcto.cn css和js引用 公...
摘要:是一個基于的快速開發(fā)插件,支持數(shù)據(jù)表格增刪改查操作,提供通用的組件,通過配置實現(xiàn)數(shù)據(jù)請求,減少前端重復(fù)開發(fā)的工作。 fsLayui 是一個基于layui的快速開發(fā)插件,支持數(shù)據(jù)表格增刪改查操作,提供通用的組件,通過配置html實現(xiàn)數(shù)據(jù)請求,減少前端js重復(fù)開發(fā)的工作。 GitHub下載 碼云下載 測試環(huán)境地址:http://fslayui.itcto.cn css和js引用 公...
摘要:什么是是一種基于和的用戶界面插件集合。為創(chuàng)建現(xiàn)代化,互動,應(yīng)用程序,提供必要的功能。是個完美支持網(wǎng)頁的完整框架。很簡單但功能強大的。返回則取消該動作。該函數(shù)有下列參數(shù)要傳遞到遠程服務(wù)器的參數(shù)對象。當檢索數(shù)據(jù)成功時調(diào)用的回調(diào)函數(shù)。 什么是easyUI easyui是一種基于jQuery、Angular.、Vue和React的用戶界面插件集合。easyui為創(chuàng)建現(xiàn)代化,互動,JavaScr...
閱讀 2416·2021-11-25 09:43
閱讀 1195·2021-09-07 10:16
閱讀 2603·2021-08-20 09:38
閱讀 2936·2019-08-30 15:55
閱讀 1449·2019-08-30 13:21
閱讀 883·2019-08-29 15:37
閱讀 1435·2019-08-27 10:56
閱讀 2093·2019-08-26 13:45