java miniui datagrid_miniui datagrid 的客户端分页解决方案
官方的解决方案
官方在“在线示例”中给了一个简单的 client pagination 解决方案,代码就不贴了,这里说说它的基本思想和处理过程。
首先,是绑定一个 preload 事件,在这个事情中设置 event.cancel = true,阻止 datagrid 在翻页的时候向服务器请求加载数据。
那么数据从哪来呢?当然只有在外部写一个 ajax 过程获取了。不过取得的数据并不直接交给 datagrid,而是缓存起来,放在 dataResult 中。
现在继续说 preload,除了阻止 datagrid 向服务器请求数据之外,preload 还需要从缓存中找到页码对应的数据行,通过 setData 设置给 datagrid 渲染出来。OK,这个事情是交给自定义函数 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 语法
const METHODS = ["setData", "load"];
class ClientPagination {
constructor(datagrid) {
this._datagrid = datagrid;
this._origin = {};
this.setup();
}
setup() {
// TODO 暂存 this._datagrid 的 load、setData 等方法
// 并为 this._datagrid 设置新方法和注册事件
}
destroy() {
// 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 的客户端分页。
但是这个实现只是解决了当前的问题,如果有新的需求:
当页码在前三页的时候用客户端分页,以减少数据加载次数,翻到后面的时候需要用服务器端分页
又该如何?是不是该出个续集?
java miniui datagrid_miniui datagrid 的客户端分页解决方案相关推荐
- 客户端启动报错java.lang.IllegalArgumentException: no server available的解决方案 SpringCloud中 Nacos做注册中心
客户端启动报错java.lang.IllegalArgumentException: no server available的解决方案 SpringCloud中 Nacos做注册中心(谷粒) 报错内容 ...
- Java架构直通车——ElasticSearch深度分页解决方案
文章目录 分页查询 深度分页 深度分页解决方案 分页查询 分页查询是这样的: POST /shop/_doc/_search {"query": {"match_all& ...
- 分页解决方案 —— GridView + QuickPager + QuickPager_SQL + DataAccessLibrary + 数据库
这里要说的不仅仅是一个分页控件,而是一套解决方案,包括如何显示数据.显示分页导航,如何得到分页用的sql语句(等效于存储过程),如何提取数据,如何绑定控件,如何响应事件,添加.修改.删除数据后如何更新 ...
- 利用Ajax实现DataGrid无刷新分页(AjaxGrid)【转】
利用Ajax实现DataGrid无刷新分页(AjaxGrid) DataGrid功能强大,我们只用写几行代码就能够实现复杂的页面数据显示.数据多的时候免不了要分页显示,DataGrdi本身自带分页功能 ...
- java项目如何启动tomcat服务器,Java web项目启动Tomcat报错解决方案
Java web项目启动Tomcat报错解决方案 点击运行项目时显示 A Java Exception has occurred. 'Starting Tomcat v9.0 Server at lo ...
- [原创]java读写word文档,完美解决方案
[原创]java读写word文档,完美解决方案 参考文章: (1)[原创]java读写word文档,完美解决方案 (2)https://www.cnblogs.com/ziwuxian/p/89812 ...
- win10安装JDK cmd中可以运行java,但不能用javac,解决方案
win10安装JDK cmd中可以运行java,但不能用javac,解决方案 参考文章: (1)win10安装JDK cmd中可以运行java,但不能用javac,解决方案 (2)https://ww ...
- Java 网址短链接服务原理及解决方案
Java 网址短链接服务原理及解决方案 参考文章: (1)Java 网址短链接服务原理及解决方案 (2)https://www.cnblogs.com/xuzhujack/p/11202364.htm ...
- 因为 Java 和 Php 在获取客户端 cookie 方式不同引发的 bug
遇到个 Java 和 Php 在获取客户端 cookie 方式不同导致跨系统的问题.所以写了这篇博客梳理下相关知识. 实验 下面通过两个简单的实验,来看Java和Php在获取web请求中的cookie ...
最新文章
- MyEclipse10中导入的jquery文件报错(出现红叉叉,提示语法错误)
- Java中的ThreadLocal详解
- 软中断amp;taskletamp;工作队列
- [CEOI2016] kangaroo(排列dp)
- 面试常见java异常题_Java异常面试题(含答案)
- 将视图转为image_使用视图绑定替代 findViewById
- 计算机二级考试c语言冲刺,计算机二级C语言考试冲刺练习题
- (204)浮点数的表示
- [Java]HashMap的两种排序方式
- 《JavaScript征途》广泛征集读后感创作者,参与有奖!
- docker 容器安装 vim 编辑器
- HTML5能取代Android和iOS应用程序吗?
- UCINET(64 bits)使用中 Access violation at address问题
- 计算机里电子 邮件格式,邮箱格式怎么写?
- 人际网络营销与网站运营、策划、推广一体化结合
- FIRST TODY STAR
- 怎么运行c语言程序,如何使用C语言进行编程操作,教程在这里,C语言编程快速入门...
- 地图集web项目_技术学习(二)_bootstrap分页的例子
- js 排序,push,pop,shit,unshit(),splice(),随机打乱数组,随机方法总结
- 【bugku CTF】MISC杂项:很普通的数独(isccctf)、啊哒、隐写、隐写2、多种方法解决、easy_crypto 、聪明的小羊、ping
热门文章
- python之地基(一)
- 假期作业python
- SpringAOP-基于@AspectJ的简单入门
- MyEclipse开启Jquery智能提示
- metasploit连接postgresql的问题(U盘启动kali linux)
- Linux命令之进程的管理
- Deploy Oracle 10.2.0.5 on Red Hat Enterprise Linux 6.4
- 解析:如何在 ASP.NET 中下载文件
- [转载] python创建集合set()_python 之集合{}(Set)
- [转载] python字符串数组字典_Python:字符串、列表、元组、字典