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