扩展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功能

发表评论

电子邮件地址不会被公开。 必填项已用*标注