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 相关文章推荐
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
JS中操作JSON总结
Dec 06 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
Angular中的$watch方法详解
Sep 18 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
解决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通过ajax实现双击table修改内容
2014/04/28 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
Cookie 小记
2010/04/01 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
python 简单的绘图工具turtle使用详解
2017/06/21 Python
python实现浪漫的烟花秀
2019/01/30 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
低碳环保标语
2014/06/12 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android