Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about the client-side paging solution of miniui datagrid. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

The official solution

The official "online example" gives a simple client pagination solution, the code will not be posted, here are its basic ideas and processing process.

First, bind a preload event, in which you set event.cancel = true to prevent datagrid from requesting to load data from the server when the page is turned.

So where does the data come from? Of course, the only way to get it is to write an ajax procedure outside. However, the obtained data is not sent directly to datagrid, but is cached and placed in dataResult.

Now let's move on to preload. In addition to preventing datagrid from requesting data from the server, preload also needs to find the data row corresponding to the page number in the cache and render it to datagrid through setData settings. OK, this is done by the custom function fillData. Of course, there are also some page-related things to do here, namely setTotalCount (), setPageIndex (), and setPageCount ().

The official solution demonstrates the basic idea of the miniui datagrid client-side paging solution, but this example is too simple. What if you want to change the previous server paging to client paging? Calls to load (), setData (), and so on already exist, but now how to implement client-side paging with minimal code changes?

Class ClientPagination

With regard to the above problem, the first thing that comes to mind is to keep the original interface between load () and setData (), but change their behavior.

The original behavior of load () is to commit (the XXX parameter) to load the data for the specified page from the server; now you need to load all the data instead.

SetData () originally set to datagrid all the rows of data that need to be displayed, regardless of paging (for example, it can display 200 pieces of data at a time); now, if the amount of data set is too large, it needs to be displayed page by page on the client side.

The JavaScript language is dynamic, which makes replacement methods possible, which many static languages cannot do. And the replacement method is also the easiest way to solve this problem. Of course, in addition to that, we are lucky that miniui does not use the jQuery extension (such as $grid.datagrid ("setData",...)). To implement the component.

The replacement method is possible, but the original method has to be retained, because we need to manipulate the datagrid through the original method. So the ClientPagination class should look like this:

The basic structure of ClientPagination

Note: all the code in this article is ES6 syntax

Const METHODS = ["setData", "load"]; class ClientPagination {constructor (datagrid) {this._datagrid = datagrid; this._origin = {}; this.setup () } setup () {/ / TODO temporarily stores load, setData and other methods of this._datagrid and sets new methods and registration events for this._datagrid} destroy () {/ / TODO method to restore this._datagrid Logout event} onBeforeLoad () {/ / according to the official solution e.cancel = true Let pageIndex = e.data.pageIndex; let pageSize = e.data.pageSize; this.setPageData (pageIndex, pageSize) } / / refer to datagrid.load 's function signature load (params, success, fail) {/ / TODO to load data and save it to this._data / / then call this.setData () to save and display data} setData (data) {/ / TODO save data to this._data / / then call this.setPageData () to display the data of the current page} setPageData (pageIndex, pageSize) {/ / TODO from the cached this._data, press pageIndex and pageSize to fetch the data rows to be displayed / / and then set the data rows in datagrid through this._origin.setData ()}}

Set up and release client paging

Setup and destroy are paged for datagrid binding and unbinding clients, respectively.

Setup () {const grid = this._datagrid; const original = this._origin = {}; METHODS.forEach (name = > {/ / temporarily save the original method origin [name] = grid [name] .bind (grid); / / replace with the new method grid [name] = this [name] .bind (this) defined in this class;}) / / temporarily store the event handler to log out this._onBeforeLoad = this.onBeforeLoad.bind (this); grid.on ("beforeload", this._onBeforeLoad);} destroy () {this._origin = {}; this._datagrid.un ("beforeload", this._onBeforeLoad); this._datagrid = null;}

Key code from the official example

OnBeforeLoad and setPageData are written with reference to the beforeload event and the fillData method in the official solution. The code for onBeforeLoad is already there, and now it's the code for 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 ();}});}

Rewrite setData

And setData has also been replaced. The parameter is the data of the entire table, but only the data of the current page can be displayed.

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

Application

To facilitate encapsulation, add a static method

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

Now you just need to add to the page initialization (or other appropriate initialization location)

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

If you need destroy, you can do this.

Var cpBlabla = ClientPagination.wrap (mini.get ("datagridId")); CpBalbal.destory ()

Through the encapsulation of ClientPagination, the client-side paging of miniui datagrid can be realized without changing the original business code and settings.

But this implementation only solves the current problem, if there are new requirements:

Client-side paging is used when the page number is in the first three pages to reduce the number of data loading, and server-side paging is needed when turning to the back.

This is how the client-side paging solution of miniui datagrid is shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.