完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能

需求&场景

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

实现方法

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

demo 网址 http://221.224.21.30:2020/orders/index

 

代码实现

　　easyui datagrid 拖动调整列的位置功能官方已经提供扩展支持  下载地址 可以获得。

 

 

 

 现在还需要自定义扩展保存和加载的功能（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);

datagrid 代码

//初始化定义datagrid
    var $dg = $('#orders_datagrid');
    $(() => {
      //定义datagrid结构
      $dg.datagrid({
        rownumbers: true,
        checkonselect: false,
        selectoncheck: true,
        idfield: 'id',
        sortname: 'id',
        sortorder: 'desc',
        remotefilter: true,
        singleselect: false,
        url: '/orders/getdataasync',
        method: 'get',
        onclickcell: onclickcell,
        pagination: true,
        striped: true,
        onheadercontextmenu: function (e, field) {
          e.preventdefault();
          $(this).datagrid('columnmenu').menu('show', {
            left: e.pagex,
            top: e.pagey
          });
        },
        onbeforeload: function () {
          //datagrid resize when jarviswidgets resized.
          const that = $(this);
          $(window).on("resize.jarviswidgets", () => {
            that.datagrid('resize');
          })
        },
        onloadsuccess: function (data) {
          editindex = undefined;
        },
        oncheck: function () {
          $("button[name*='deletebutton']").prop("disabled", false);
        },
        onuncheck: function () {

        },
        onselect: function (index, row) {
          order = row;
        },
        onbeginedit: function (index, row) {
          //const editors = $(this).datagrid('geteditors', index);

        },
        onendedit: function (index, row) {

          editindex = undefined;
        },
        onbeforeedit: function (index, row) {
          editindex = index;
          row.editing = true;
          $("button[name*='deletebutton']").prop("disabled", false);
          $("button[name*='cancelbutton']").prop("disabled", false);
          $("button[name*='savebutton']").prop("disabled", false);
          $(this).datagrid('refreshrow', index);
        },
        onafteredit: function (index, row) {
          row.editing = false;
          $(this).datagrid('refreshrow', index);
        },
        oncanceledit: function (index, row) {
          row.editing = false;
          editindex = undefined;
          $("button[name*='deletebutton']").prop("disabled", false);
          $("button[name*='savebutton']").prop("disabled", true);
          $("button[name*='cancelbutton']").prop("disabled", true);
          $(this).datagrid('refreshrow', index);
        },
        frozencolumns: [[
          /*开启checkbox选择功能*/
          { field: 'ck', checkbox: true },
          {
            field: 'action',
            title: '@html.l("command")',
            width: 85,
            sortable: false,
            resizable: true,
            formatter: function showdetailsformatter(value, row, index) {
              if (!row.editing) {
                return `<div class="btn-group">\
                                                         <button onclick="showdetailswindow('${row.id}',  ${index})" class="btn btn-default btn-xs" title="查看明细" ><i class="fa fa-pencil-square-o"></i> </button>\
                                                         <button onclick="deleterow('${row.id}',${index})" class="btn btn-default btn-xs" title="删除记录" ><i class="fa fa-trash-o"></i> </button>\
                                                    </div>`;
              } else {
                return `<button class="btn btn-default btn-xs" disabled title="查看明细"  ><i class="fa fa-pencil-square-o"></i> </button>`;
              }
            }
          }
        ]],
        columns: [[
          { /*id*/
            field: 'id',
            title: '<span class="required">@html.displaynamefor(model => model.id)</span>',
            width: 120,
            sortable: true,
            resizable: true,
            hidden: true
          },
          {    /*订单号*/
            field: 'orderno',
            title: '<span class="required">@html.displaynamefor(model => model.orderno)</span>',
            width: 130,
            hidden: false,
            editor: {
              type: 'textbox',
              options: { prompt: '@html.displaynamefor(model => model.orderno)', required: true, validtype: 'length[12,12]' }
            },
            sortable: true,
            resizable: true
          },
          {    /*订单所属的客户*/
            field: 'customer',
            title: '<span class="required">@html.displaynamefor(model => model.customer)</span>',
            width: 130,
            hidden: false,
            editor: {
              type: 'textbox',
              options: { prompt: '@html.displaynamefor(model => model.customer)', required: true, validtype: 'length[0,30]' }
            },
            sortable: true,
            resizable: true
          },
          {    /*发货地址*/
            field: 'shippingaddress',
            title: '<span class="required">@html.displaynamefor(model => model.shippingaddress)</span>',
            width: 300,
            hidden: false,
            editor: {
              type: 'textbox',
              options: { prompt: '@html.displaynamefor(model => model.shippingaddress)', required: true, validtype: 'length[0,200]' }
            },
            sortable: true,
            resizable: true
          },
          {    /*备注*/
            field: 'remark',
            title: '@html.displaynamefor(model => model.remark)',
            width: 260,
            hidden: false,
            editor: {
              type: 'textbox',
              options: { prompt: '@html.displaynamefor(model => model.remark)', required: false, validtype: 'length[0,100]' }
            },
            sortable: true,
            resizable: true
          },
          {   /*订单日期默认当天*/
            field: 'orderdate',
            title: '<span class="required">@html.displaynamefor(model => model.orderdate)</span>',
            width: 120,
            align: 'right',
            hidden: false,
            editor: {
              type: 'datebox',
              options: { prompt: '@html.displaynamefor(model => model.orderdate)', required: true }
            },
            formatter: dateformatter,
            sortable: true,
            resizable: true
          },
        ]]
      }).datagrid('columnmoving')
        .datagrid('resetcolumns');


<script src="~/scripts/easyui/plugins/columns-reset.js"></script>

另外做一个小广告

本人可以利用一些业余时间承接一些小项目的开发，有需求的可以合作，下面是我做过的一些项目，开发周期1周出原型，每周与客户确认开发成果，1个月完成制定的功能，1-2周时间上线调优交付（包含源代码）费用差不多2-5万之间

一个简单tms系统 1个月时间完成开发  demo 

 

 一个简单仓库qc加收出管理系统  1个月时间完成开发  demo 

 

  集卡运输系统  1个月时间完成开发  demo