完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能
<h2>需求&场景</h2><p> 例表查询是业务系统中使用最多也是最底子功能，但也是调解最寻常，不同的用户对数据的要求也不一样，以是在系统正式使用后，做为开发恨不得坐在业务边上，根据他们的要求举行调解，需要调解最多就是列的位置和宽度。非常贫苦，而且还会不停的变。最好的方式把这个功能放给用户，让用户自己去调解，并生存在本地，如许就不需要每次做调解了。</p>
<h2>实现方法</h2>
<p> 由于我这边的项目都是用easyui datagrid开发的，datagrid提供了对每一列宽度的手工调解和位置的拖动功能，但是并没有提供生存修改后属性功能，这里我们就需要对datagrid举行扩展，扩展新增一个生存功能，将修改后的属性生存到浏览器的localstorage,再新增一个初始化的时候读取localstorage的属性举行调解，就可以实现想要的功能了。</p>
<p>demo 网址 http://221.224.21.30:2020/Orders/Index</p>
<p> <div align="center"></div></p>
<h2>代码实现</h2>
<p> easyui datagrid 拖动调解列的位置功能官方已经提供扩展支持https://www.jeasyui.com/extension/columns_ext.php下载地址 可以获得。</p>
<p> </p>
<p> </p>
<p><div align="center"></div></p>
<p> </p>
<p> 现在还需要自界说扩展生存和加载的功能（columns-reset.js）</p>
<div align="center"></div><div align="center"></div>
(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;
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;
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);
},
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) {
//loadsort datagrid columns
let sortcolumns = [];
for (let i = 0; i < local.length; i++) {
const field = local.field;
const localboxwidth = local.boxWidth;
const localwidth = local.width;
const localhidden = local.hidden || false;
let col = $(this).datagrid('getColumnOption', field);
//修改列的宽度和隐藏属性
col.boxWidth = localboxwidth;
col.width = localwidth;
col.hidden = localhidden;
sortcolumns.push(col);
}
$(this).datagrid({
columns:
}).datagrid('columnMoving');
}
});
}
});
})(jQuery);
columns-reset.js
<p>datagrid 代码</p>
<div align="center"></div><div align="center"></div>
//初始化界说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").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").prop("disabled", false);
$("button").prop("disabled", false);
$("button").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").prop("disabled", false);
$("button").prop("disabled", true);
$("button").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: '@Html.DisplayNameFor(model => model.Id)',
width: 120,
sortable: true,
resizable: true,
hidden: true
},
{ /*订单号*/
field: 'OrderNo',
title: '@Html.DisplayNameFor(model => model.OrderNo)',
width: 130,
hidden: false,
editor: {
type: 'textbox',
options: { prompt: '@Html.DisplayNameFor(model => model.OrderNo)', required: true, validType: 'length' }
},
sortable: true,
resizable: true
},
{ /*订单所属的客户*/
field: 'Customer',
title: '@Html.DisplayNameFor(model => model.Customer)',
width: 130,
hidden: false,
editor: {
type: 'textbox',
options: { prompt: '@Html.DisplayNameFor(model => model.Customer)', required: true, validType: 'length' }
},
sortable: true,
resizable: true
},
{ /*发货地址*/
field: 'ShippingAddress',
title: '@Html.DisplayNameFor(model => model.ShippingAddress)',
width: 300,
hidden: false,
editor: {
type: 'textbox',
options: { prompt: '@Html.DisplayNameFor(model => model.ShippingAddress)', required: true, validType: 'length' }
},
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' }
},
sortable: true,
resizable: true
},
{ /*订单日期默认当天*/
field: 'OrderDate',
title: '@Html.DisplayNameFor(model => model.OrderDate)',
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>
order index.html
<h2>另外做一个小广告</h2>
<p>本人可以利用一些业余时间承接一些小项目标开发，有需求的可以互助，下面是我做过的一些项目，开发周期1周出原型，每周与客户确认开发成果，1个月完成订定的功能，1-2周时间上线调优交付（包罗源代码）费用差不多2-5万之间</p>
<p>一个简朴TMS系统 1个月时间完成开发DEMO http://221.224.21.30:2018/</p>
<p><div align="center"></div></p>
<p> </p>
<p> 一个简朴堆栈QC加收出管理系统1个月时间完成开发DEMO http://221.224.21.30:2022/</p>
<p><div align="center"></div></p>
<p> </p>
<p>集卡运输系统1个月时间完成开发DEMO http://221.224.21.30:2021/</p>
<p><div align="center"></div></p>
<p> </p>
<p> </p>
<p><div align="center"></div></p>
<p> </p>
<p> </p>
<p> </p>
<p><div align="center"></div></p>
<p> </p>
<p> <div align="center"></div></p>
<p> </p><br><br/><br/><br/><br/><br/>来源：<a href="https://www.cnblogs.com/neozhu/p/11639362.html" target="_blank">https://www.cnblogs.com/neozhu/p/11639362.html</a>
页:
[1]