這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)miniui datagrid的客戶端分頁解決方法是怎樣的，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供松滋網(wǎng)站建設(shè)、松滋做網(wǎng)站、松滋網(wǎng)站設(shè)計(jì)、松滋網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、松滋企業(yè)網(wǎng)站模板建站服務(wù)，10余年松滋做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

官方的解決方法

官方在“在線示例”中給了一個(gè)簡(jiǎn)單的 client pagination 解決方法，代碼就不貼了，這里說說它的基本思想和處理過程。

首先，是綁定一個(gè) preload 事件，在這個(gè)事情中設(shè)置 event.cancel = true，阻止 datagrid  在翻頁的時(shí)候向服務(wù)器請(qǐng)求加載數(shù)據(jù)。

那么數(shù)據(jù)從哪來呢?當(dāng)然只有在外部寫一個(gè) ajax 過程獲取了。不過取得的數(shù)據(jù)并不直接交給 datagrid，而是緩存起來，放在dataResult  中。

現(xiàn)在繼續(xù)說 preload，除了阻止 datagrid 向服務(wù)器請(qǐng)求數(shù)據(jù)之外，preload 還需要從緩存中找到頁碼對(duì)應(yīng)的數(shù)據(jù)行，通過  setData設(shè)置給 datagrid 渲染出來。OK，這個(gè)事情是交給自定義函數(shù) fillData  來實(shí)現(xiàn)的。當(dāng)然，這里還要干點(diǎn)與頁面相關(guān)的事情，就是setTotalCount()、setPageIndex() 和 setPageCount()。

官方的解決方案展示了 miniui datagrid  客戶端分頁解決方案的基本思想，但是這個(gè)示例太過簡(jiǎn)單。如果，想把之前的服務(wù)端分頁改成客戶端分頁該怎么辦?原來已經(jīng)存在對(duì) load()、setData()  等的調(diào)用，現(xiàn)在怎樣以最小的代碼改動(dòng)來實(shí)現(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  語言是動(dòng)態(tài)有，這使得替換方法成為可能，這是很多靜態(tài)語言做不到的事情。而替換方法也是解決這個(gè)問題時(shí)最容易想到的辦法。當(dāng)然除此之外，還得慶幸 miniui 沒有采用  jQuery 擴(kuò)展的方式(如 $grid.datagrid("setData", ...))來實(shí)現(xiàn)組件。

替換方法成為可能，但是原有方法還是得保留，因?yàn)槲覀冃枰ㄟ^原有方法來操作 datagrid。所以 ClientPagination  類應(yīng)該是這個(gè)樣子：

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è)置新方法和注冊(cè)事件     }      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 實(shí)現(xiàn)加載數(shù)據(jù)，并保存到 this._data 中         // 然后調(diào)用 this.setData() 保存和顯示數(shù)據(jù)     }      setData(data) {         // TODO 保存 data 到 this._data 中，         // 然后調(diào)用 this.setPageData() 顯示當(dāng)前頁的數(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 也進(jìn)行了替換，參數(shù)是整表的數(shù)據(jù)，但只能顯示當(dāng)前頁的數(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)用

為了方便封裝，再加一個(gè)靜態(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();

通過 ClientPagination 的封裝，不需要改變?cè)械臉I(yè)務(wù)代碼和設(shè)置，就可以實(shí)現(xiàn) miniui datagrid 的客戶端分頁。

但是這個(gè)實(shí)現(xiàn)只是解決了當(dāng)前的問題，如果有新的需求：

當(dāng)頁碼在前三頁的時(shí)候用客戶端分頁，以減少數(shù)據(jù)加載次數(shù)，翻到后面的時(shí)候需要用服務(wù)器端分頁

上述就是小編為大家分享的miniui datagrid的客戶端分頁解決方法是怎樣的了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

標(biāo)題名稱：miniuidatagrid的客戶端分頁解決方法是怎樣的
文章路徑：http://chinadenli.net/article30/ggjpso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、用戶體驗(yàn)、網(wǎng)站建設(shè)、微信公眾號(hào)、企業(yè)建站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)