需求&場景
例表查詢是業務系統中使用最多也是最基礎功能，但也是調整最平凡，不同的用戶對資料的要求也不一樣，所以在系統正式使用后，做為開發恨不得坐在業務邊上，根據他們的要求進行調整，需要調整最多就是列的位置和寬度，非常麻煩，而且還會不停的變，最好的方式把這個功能放給用戶，讓用戶自己去調整，并保存在本地，這樣就不需要每次做調整了，
實作方法
因為我這邊的專案都是用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
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'); }) }, onl oadSuccess: 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 >@Html.DisplayNameFor(model => model.Id)</span>', width: 120, sortable: true, resizable: true, hidden: true }, { /*訂單號*/ field: 'OrderNo', title: '<span >@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 >@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 >@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 >@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=https://www.cnblogs.com/neozhu/p/"~/Scripts/easyui/plugins/columns-reset.js"></script>order index.html
另外做一個小廣告
本人可以利用一些業余時間承接一些小專案的開發，有需求的可以合作，下面是我做過的一些專案，開發周期1周出原型，每周與客戶確認開發成果，1個月完成制定的功能，1-2周時間上線調優交付（包含源代碼）費用差不多2-5萬之間
一個簡單TMS系統 1個月時間完成開發 DEMO http://221.224.21.30:2018/
一個簡單倉庫QC加收出管理系統 1個月時間完成開發 DEMO http://221.224.21.30:2022/
集卡運輸系統 1個月時間完成開發 DEMO http://221.224.21.30:2021/
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/12336.html
標籤：ASP.NET