例表查詢是業務系統中使用最多也是最基礎功能,但也是調整最平凡,不一樣的用戶對數據的要求也不同,因此在系統正式使用後,作爲開發巴不得坐在業務邊上,根據他們的要求進行調整,須要調整最多就是列的位置和寬度。很是麻煩,並且還會不停的變。最好的方式把這個功能放給用戶,讓用戶本身去調整,並保存在本地,這樣就不須要每次作調整了。php
由於我這邊的項目都是用easyui datagrid開發的,datagrid提供了對每一列寬度的手工調整和位置的拖動功能,可是並無提供保存修改後屬性功能,這裏咱們就須要對datagrid進行擴展,擴展新增一個保存功能,將修改後的屬性保存到瀏覽器的localstorage,再新增一個初始化的時候讀取localstorage的屬性進行調整,就能夠實現想要的功能了。html
demo 網址 http://221.224.21.30:2020/Orders/Indexgit
easyui datagrid 拖動調整列的位置功能官方已經提供擴展支持https://www.jeasyui.com/extension/columns_ext.php 下載地址 能夠得到。瀏覽器
如今還須要自定義擴展保存和加載的功能(columns-reset.js)app
(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 代碼ide
//初始化定義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萬之間ui
一個簡單TMS系統 1個月時間完成開發 DEMO http://221.224.21.30:2018/this
一個簡單倉庫QC加收出管理系統 1個月時間完成開發 DEMO http://221.224.21.30:2022/url
集卡運輸系統 1個月時間完成開發 DEMO http://221.224.21.30:2021/spa