miniui datagrid的客户端分页解决方法是怎样的

本期，边肖将为您带来miniui datagrid客户端分页的解决方案。文章内容丰富，从专业角度进行分析和描述。看完这篇文章，希望你能有所收获。

官方的解决方法

在官方的“在线示例”中，给出了客户端分页的简单解决方案，代码就不贴了。下面，我们来说说它的基本思路和处理过程。

首先，绑定一个预加载事件，并在此事件中设置event.cancel=true，以防止datagrid在翻页时请求服务器加载数据。

那么数据从何而来呢？当然，它只能通过在外部编写一个ajax过程来获得。但是，获取的数据并不直接交给datagrid，而是缓存并放置在dataResult中。

现在继续谈论预载。除了防止datagrid向服务器请求数据之外，preload还需要从缓存中找到与页码对应的数据行，并通过setData设置将它们呈现给datagrid。好的，这是由自定义函数fillData完成的。当然，这里还有一些与页面相关的事情要做，那就是setTotalCount()，setPageIndex()和setPageCount()。

的官方解决方案展示了miniui datagrid客户端分页解决方案的基本思想，但是这个例子太简单了。如果我想将以前的服务器页面更改为客户端页面，我应该怎么做？已有对load()、setData()等的调用。现在如何用最少的代码更改实现客户端分页？

class ClientPagination

对于上述问题，首先想到的是保留load()和setData()的原始接口，但改变它们的行为。

load()最初的行为是提交[〔XXX参数]并从服务器加载指定页面的数据；现在您需要加载所有数据。

SetData()最初将所有需要显示的数据行设置为datagrid，不考虑分页(例如一次可以显示200条数据)；现在，如果设置的数据量太大，需要通过客户端分页逐页显示。

JavaScript语言是动态的，这使得它的替换成为可能，这是很多静态语言做不到的。替换法也是解决这个问题时最容易想到的方法。此外，当然幸运的是miniui没有使用jQuery扩展(比如$grid.datagrid('setData '，))来实现组件。

替换方法是可能的，但是仍然必须保留原始方法，因为我们需要通过原始方法操作datagrid。所以ClientPagination类应该如下所示：

ClientPagination 的基本结构

注意：本文中的所有代码都是ES6语法。

constMETHODS=['setData '，' load ']；classclientpaging {构造函数(datagrid){this。_ datagrid=datagrid这个。_ origin={ }；this . setup()；}setup(){//TODO临时存储此的load、setData等方法。_ datagrid//并设置新方法和注册事件{ destroy(){ nb

sp;// TODO 恢复 this._datagrid 的方法，注销事件     }          onBeforeLoad() {         // 根据官方的解决方案而来         e.cancel = true;         let pageIndex = e.data.pageIndex;         let pageSize = e.data.pageSize;         this.setPageData(pageIndex, pageSize);     }      // 参照 datagrid.load 的函数签名     load(params, success, fail) {         // TODO 实现加载数据，并保存到 this._data 中         // 然后调用 this.setData() 保存和显示数据     }      setData(data) {         // TODO 保存 data 到 this._data 中，         // 然后调用 this.setPageData() 显示当前页的数据     }          setPageData(pageIndex, pageSize) {         // TODO 从缓存的 this._data 中按 pageIndex 和 pageSize 取出要显示的数据行         // 然后通过 this._origin.setData() 设置在 datagrid 中     } }

设置和解除客户端分页

其中 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);        });         // 暂存事件处理函数，以便后面注销        this._onBeforeLoad = this.onBeforeLoad.bind(this);        grid.on("beforeload", this._onBeforeLoad);    }     destroy() {        this._origin = {};        this._datagrid.un("beforeload", this._onBeforeLoad);        this._datagrid = null;    }

来自官方示例中的关键代码

onBeforeLoad 以及 setPageData 是参照官方解决方案中的 beforeload 事件和 fillData  方法写的。onBeforeLoad 的代码在上面已经有了，现在是 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 调用来替换原来的 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 也进行了替换，参数是整表的数据，但只能显示当前页的数据

setData(data) {         const rows = Array.isArray(data)             ? data             : (data.data || []);          this._data = rows;         this.setPageData(this._datagrid.getPageIndex(), this._datagrid.getPageSize());     }

应用

为了方便封装，再加一个静态方法

static wrap(datagrid) {         return new ClientPagination(datagrid);     }

现在只需要在页面初始化(或其它合适的初始化位置)加上

ClientPagination.wrap(mini.get("datagridId"));

如果需要 destroy，可以这样

var cpBlabla = ClientPagination.wrap(mini.get("datagridId")); .... cpBalbal.destory();

通过 ClientPagination 的封装，不需要改变原有的业务代码和设置，就可以实现 miniui datagrid 的客户端分页。

但是这个实现只是解决了当前的问题，如果有新的需求：

当页码在前三页的时候用客户端分页，以减少数据加载次数，翻到后面的时候需要用服务器端分页

上述就是小编为大家分享的miniui datagrid的客户端分页解决方法是怎样的了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注行业资讯频道。