扩展layui的table模块的reload功能
在项目中用layui(目前最新版本2.4.5)的数据表格模块时,有很多刷新数据的使用场景,比如根据查询条件获取不同查询结果,操作栏操作数据后刷新当前页数据,通常这些场景只需要刷新数据,不需要重新渲染表头、工具栏等,而layui目前的reload方法的功能实际效果跟render一样,还是会重新渲染整个数据表格,在一些大分辨率的电脑上体验效果很差,屏幕闪的厉害,特别是表头会突然缩小,然后重新计算铺满容器。能不能有一个方法可以只刷新数据,而不重建表头等?你如果使用layui的table的分页的话,你会发现,点击分页,并不会重新渲染表头而是只刷新数据。既然分页有这样的效果,那只刷新数据的功能应该也很容易能实现。因为layui是开源的,于是很容易能自己去看代码修改代码。
通过阅读源代码,笔者在适当位置添加了如下两个扩展方法(refresh和reloadExt),refresh是根据当前的table配置只刷新当前页的数据,而reloadExt可以接收新的配置,刷新数据,分页页码回到第一页。
return { reload: function(options){ that.reload.call(that, options); } ,setColsWidth: function(){ that.setColsWidth.call(that); } ,resize: function(){ //重置表格尺寸/结构 that.resize.call(that); } ,refresh: function() { //闲云添加用于只刷新当前分页数据,不重新渲染整个表格 that.refresh.call(that); } ,reloadExt: function(options) { //闲云添加区别于原reload,不重新渲染整个表格 that.reloadExt.call(that, options); } ,config: options } //闲云:只刷新数据,不重新渲染整个table table.refresh = function(id){ if(id){ var config = getThisTableConfig(id); //获取当前实例配置项 if(!config) return; thisTable.that[id].refresh(); } }; //闲云:扩展表格重载 table.reloadExt = function(id,options){ if(id){ var config = getThisTableConfig(id); //获取当前实例配置项 if(!config) return; thisTable.that[id].reloadExt(options); } }; //闲云:只刷新数据,不重新渲染整个table Class.prototype.refresh = function(){ var that = this; var loadindex = layer.load(1); that.pullData(that.page); layer.close(loadindex); }; //闲云:扩展表格重载 Class.prototype.reloadExt = function(options){ var that = this; if(that.config.data && that.config.data.constructor === Array) delete that.config.data; that.config = $.extend({}, that.config, options); that.page = 1; var loadindex = layer.load(1); that.pullData(that.page); layer.close(loadindex); };
其它地方还有一些小的改动,可以下载table的自定义完整版。
原创文章,转载请注明: 转载自闲云博客
本文链接地址: 扩展layui的table模块的reload功能
作者你好,我最近也遇到了这个layui表格闪烁的问题,有幸看到你这篇文章,但是我把你提供的table.js覆盖到我的项目里之后,F12提示不存在refresh方法。
我是个后端程序员,求指点。
SysUser:155 Uncaught TypeError: table.refresh is not a function
at HTMLButtonElement. (SysUser:155)
at Function.c (layui.all.js:2)
at n.each (layui.all.js:2)
at Array. (layui.all.js:2)
at n.each (layui.all.js:2)
at HTMLButtonElement.n.event.n.event (layui.all.js:2)
at HTMLButtonElement.d (layui.all.js:5)
at HTMLDocument.dispatch (layui.all.js:3)
at HTMLDocument.m.handle (layui.all.js:3)
[回复该评论]
作者你好,我最近也遇到了这个layui表格重载闪烁的问题,有幸看到你的文章,但是将你提供的table.js覆盖到项目里后,使用table.refresh()时提示不存在refresh方法。
我是个后端程序员,求指点。
[回复该评论]
Jian Yun 回复:
六月 26th, 2019 at 10:41 上午
首先要排除浏览器缓存的问题。
[回复该评论]