设为首页 加入收藏

TOP

完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能(一)
2019-10-09 20:04:53 】 浏览:222
Tags:完美 实现 保存 加载 easyui datagrid 定义 调整 位置 隐藏 性功能

需求&场景

  例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多就是列的位置和宽度。非常麻烦,而且还会不停的变。最好的方式把这个功能放给用户,让用户自己去调整,并保存在本地,这样就不需要每次做调整了。

实现方法

  因为我这边的项目都是用easyui datagrid开发的,datagrid提供了对每一列宽度的手工调整和位置的拖动功能,但是并没有提供保存修改后属性功能,这里我们就需要对datagrid进行扩展,扩展新增一个保存功能,将修改后的属性保存到浏览器的localstorage,再新增一个初始化的时候读取localstorage的属性进行调整,就可以实现想要的功能了。

demo 网址 http://221.224.21.30:2020/Orders/Index

 

代码实现

  easyui datagrid 拖动调整列的位置功能官方已经提供扩展支持https://www.jeasyui.com/extension/columns_ext.php  下载地址 可以获得。

 

 

 

 现在还需要自定义扩展保存和加载的功能(columns-reset.js)

(function ($) {
  function buildMenu(target) {
    const state = $(target).data('datagrid');
    //冻结列不允许修改属性和位置
    //const fields = $(target).datagrid('getColumnFields',true).concat($(target).datagrid('getColumnFields', false));
    const fields = $(target).datagrid('getColumnFields');
    if (!state.columnMenu) {
      state.columnMenu = $('<div></div>').appendTo('body');
      state.columnMenu.menu({
        onClick: function (item) {
          if (item.iconCls === 'tree-checkbox1') {
            $(target).datagrid('hideColumn', item.name);
            $(this).menu('setIcon', {
              target: item.target,
              iconCls: 'tree-checkbox0'
            });
          } else if (item.iconCls === 'tree-checkbox0') {
            $(target).datagrid('showColumn', item.name);
            $(this).menu('setIcon', {
              target: item.target,
              iconCls: 'tree-checkbox1'
            });
          } else if (item.iconCls === 'icon-save') {
            //保存配置
          }
          let opts = [];
          for (let i = 0; i < fields.length; i++) {
            const field = fields[i];
            const col = $(target).datagrid('getColumnOption', field);
            opts.push(col);
          }
          //将调整好的属性保存到localstorage中
          localStorage.setItem($(target).datagrid('options').id, JSON.stringify(opts));
        }
      });
      state.columnMenu.menu('appendItem', {
        text: '保存配置',
        name: 'saveconfigitem',
        iconCls: 'icon-save'
      });
      for (let i = 0; i < fields.length; i++) {
        const field = fields[i];
        const col = $(target).datagrid('getColumnOption', field);
        if (col.title !== undefined)
          state.columnMenu.menu('appendItem', {
            text: col.title,
            name: field,
            iconCls: !col.hidden ? 'tree-checkbox1' : 'tree-checkbox0'
          });
      }
    }
    return state.columnMenu;
  }

  $.extend($.fn.datagrid.methods, {
    columnMenu: function (jq) {
      return buildMenu(jq[0]);

    },
    resetColumns: function (jq) {
      return jq.each(function () {
        const opts = $(this).datagrid('options');
        const local = JSON.parse(localStorage.getItem(opts.id));
        //冻结的列不参与设置
        //const fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields', false));
        //const fields = $(this).datagrid('getColumnFields');
        if (local !== null) {
          //load  sort datagrid columns 
          let sortcolumns = [];
          for (let i = 0; i < local.length; i++) {
            const field = local[i].field;
            const localboxwidth = local[i].boxWidth;
            const localwidth = local[i].width;
            const localhidden = local[i].hidden || false;
            let col = $(this).datagrid('getColumnOption', field);
            //修改列的宽度和隐藏属性
            col.boxWidth = localboxwidth;
            col.width = localwidth;
            col.hidden = localhidden;
            sortcolumns.push(col);
          }
          $(this).datagrid({
            columns: [sortcolumns]
          }).datagrid('columnMoving');
        }

   
        
        
          
      });
    }
  });

})(jQuery);
columns-reset.js

datagr

首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇两个集合对比 下一篇C#调用OpenCV开发简易版美图工具

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目