ExtJs使用自定义插件动态保存表头配置(隐藏或显示)


Posted in Javascript onSeptember 25, 2018

关于保存列表表头的配置,一般我们不需要与后台交互,直接保存在 localStorage 中就能满足常规使用需求(需要浏览器支持)。

直接上代码,插件:

Ext.define('ux.plugin.ColumnCustom', {
  alias: 'plugin.columnCustom',
  xtype: 'columnCustom',
  //初始化
  init: function (gridPanel) {
    var me = this;
    me.owner = gridPanel;
    //根据已有配置项设置表头状态
    me.setColumnConfig(gridPanel);
    gridPanel.on({
      columnschanged: me.saveColumnConfig,
      scope: me
    });
  },
  setColumnConfig: function (gridPanel) {
    var me = this,
      xtype = gridPanel.getXType(),
      currentColumnConfig = me.getCurrentColumnConfig(),
      columnConfig = currentColumnConfig[xtype],
      columns = gridPanel.getColumns();
    if (!columnConfig) return;
    columns.forEach(function (column) {
      var dataIndex = column.config.dataIndex;
      //只有常规列才有显式的dataIndex,序号列等非常规列应排除在外
      if (!dataIndex) return;
      column.setHidden(columnConfig[dataIndex]);
    });
  },
  saveColumnConfig: function () {
    var me = this,
      gridPanel = me.owner,
      currentColumnConfig = me.getCurrentColumnConfig(),
      columns = gridPanel.getColumns(),
      xtype = gridPanel.getXType(),
      config = {};
    columns.forEach(function (column) {
      var dataIndex = column.config.dataIndex;
      //只有常规列才有显式的dataIndex,序号列等非常规列应排除在外
      if (!dataIndex) return;
      config[dataIndex] = column.isHidden();
    });
    //使用xtype作为索引是相对可靠的做法
    currentColumnConfig[xtype] = config;
    //localStorage的值类型限定为string类型
    localStorage.setItem('columnConfig', Ext.encode(currentColumnConfig));
  },
  getCurrentColumnConfig: function () {
    var allColumnConfigString = localStorage.getItem('columnConfig'),
      allColumnConfig = Ext.decode(allColumnConfigString, true);
    return allColumnConfig || {};
  }
});

如何使用:由于这是一个比较常规的需求,因此这里默认给所有的gridPanel配置此插件,并支持手动配置参数禁用之,考虑复写gridPanel类。

代码如下:

Ext.define('override.grid.Panel', {
  override: 'Ext.grid.Panel',
  requires: ['ux.plugin.ColumnCustom'],
  columnCustomDisable: false,
  initComponent: function () {
    var me = this;
    me.callParent();
    //默认全部加上自动保存表头插件,此处追加一个可配属性来禁用此插件
    if (!me.columnCustomDisable) {
      me.addPlugin('columnCustom');
    }
  }
});

总结

以上所述是小编给大家介绍的ExtJs使用自定义插件动态保存表头配置(隐藏或显示),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
jQuery选择器基础入门教程
May 10 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
javascript简单链式调用案例分析
May 10 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 #Javascript
vue单页缓存方案分析及实现
Sep 25 #Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 #Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 #Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 #Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 #Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 #Javascript
You might like
透析PHP的配置文件php.ini
2006/10/09 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
PHP如何将XML转成数组
2016/04/04 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python之语音识别speech模块
2020/09/09 Python
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
市场部专员岗位职责
2013/11/30 职场文书
实习心得体会
2014/01/02 职场文书
运动会广播稿300字
2014/01/10 职场文书
安全负责人任命书
2014/06/06 职场文书
教室布置标语
2014/06/26 职场文书
公司租房协议书范本
2014/10/08 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
python基础之函数的定义和调用
2021/10/24 Python
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记
Go语言编译原理之源码调试
2022/08/05 Golang