更合網(wǎng)站建設制作,如何做網(wǎng)站優(yōu)化并快速提高權(quán)重,網(wǎng)頁制作作品,wordpress 主題名稱jQuery EasyUI 數(shù)據(jù)網(wǎng)格 - 動態(tài)改變列 datagrid 支持在運行時動態(tài)顯示/隱藏列、添加新列、移除列、改變列標題/寬度/對齊方式等操作。這在實際應用中非常實用#xff0c;例如#xff1a; 用戶個性化表格視圖#xff08;選擇顯示哪些列#xff09;根據(jù)權(quán)限動態(tài)隱藏敏感列切…jQuery EasyUI 數(shù)據(jù)網(wǎng)格 - 動態(tài)改變列datagrid支持在運行時動態(tài)顯示/隱藏列、添加新列、移除列、改變列標題/寬度/對齊方式等操作。這在實際應用中非常實用例如用戶個性化表格視圖選擇顯示哪些列根據(jù)權(quán)限動態(tài)隱藏敏感列切換不同數(shù)據(jù)視圖模式官方參考動態(tài)列示例https://www.jeasyui.com/tutorial/datagrid/datagrid18.php在線 Demohttps://www.jeasyui.com/demo/main/index.php?pluginDataGridpitemContextMenuColumns步驟 1: 引入 EasyUI 資源linkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script步驟 2: 創(chuàng)建基本 DataGrid包含較多列tableiddgclasseasyui-datagridtitle用戶管理動態(tài)列示例stylewidth:900px;height:500pxdata-optionsurl:get_users.php,fitColumns:true,pagination:true,rownumbers:true,singleSelect:truetheadtrthfieldidwidth80ID/ththfieldusernamewidth100用戶名/ththfieldnamewidth100姓名/ththfieldemailwidth180郵箱/ththfieldphonewidth120電話/ththfieldaddresswidth200地址/ththfieldregdatewidth100注冊日期/ththfieldlastloginwidth150最后登錄/ththfieldstatuswidth80formatterformatStatus狀態(tài)/th/tr/thead/table!-- 列控制按鈕 --divstylemargin:10px 0;ahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-showonclickshowAllColumns()顯示所有列/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-hideonclickhideSomeColumns()隱藏部分列/aahrefjavascript:void(0)classeasyui-menubuttondata-optionsmenu:#columnMenu,iconCls:icon-setting列設置/a/div!-- 右鍵列菜單可選 --dividcolumnMenuclasseasyui-menustylewidth:150px;divdata-optionsname:username用戶名/divdivdata-optionsname:email郵箱/divdivdata-optionsname:phone電話/divdivdata-optionsname:address地址/divdivdata-optionsname:lastlogin最后登錄/divdivclassmenu-sep/divdivonclickshowAllColumns()顯示所有/divdivonclickresetColumns()重置列/div/div步驟 3: JavaScript 實現(xiàn)動態(tài)改變列scripttypetext/javascript// 保存初始列配置用于重置varoriginalColumns$(#dg).datagrid(getColumnFields);// 顯示所有列functionshowAllColumns(){varfields$(#dg).datagrid(getColumnFields);for(vari0;ifields.length;i){$(#dg).datagrid(showColumn,fields[i]);}}// 隱藏部分列示例functionhideSomeColumns(){$(#dg).datagrid(hideColumn,address);$(#dg).datagrid(hideColumn,phone);$(#dg).datagrid(hideColumn,lastlogin);}// 重置列恢復初始狀態(tài)functionresetColumns(){varfields$(#dg).datagrid(getColumnFields);for(vari0;ifields.length;i){$(#dg).datagrid(hideColumn,fields[i]);}showAllColumns();// 再全部顯示}// 狀態(tài)格式化示例functionformatStatus(value){returnvalue1?啟用:禁用;}// 列設置菜單點擊事件$(function(){$(#columnMenu).menu({onClick:function(item){varfielditem.name;if($(#dg).datagrid(getColumnOption,field).hidden){$(#dg).datagrid(showColumn,field);}else{$(#dg).datagrid(hideColumn,field);}}});// 可選表頭右鍵菜單控制列顯示高級$(#dg).datagrid({onHeaderContextMenu:function(e,field){e.preventDefault();$(#columnMenu).menu(show,{left:e.pageX,top:e.pageY});}});});/script核心方法總結(jié)方法說明$(#dg).datagrid(showColumn, field)顯示指定列$(#dg).datagrid(hideColumn, field)隱藏指定列$(#dg).datagrid(getColumnFields)獲取所有列字段名數(shù)組$(#dg).datagrid(getColumnOption, field)獲取指定列的完整配置對象含 hidden 屬性$(#dg).datagrid(resize)隱藏/顯示列后調(diào)用確保布局正確高級用法動態(tài)添加/移除新列不常見但可能// 添加新列需重新定義 columnsfunctionaddNewColumn(){varnewColumns[{field:newfield,title:新列,width:100}];$(#dg).datagrid({columns:[originalColumns.concat(newColumns)]});}完整效果點擊按鈕可快速顯示/隱藏列。使用下拉菜單勾選/取消列顯示。右鍵表頭彈出列控制菜單高級體驗。表格自動調(diào)整布局。實際應用場景用戶個性化設置記住用戶偏好列結(jié)合 localStorage。權(quán)限控制根據(jù)角色隱藏敏感列如工資、身份證。多視圖切換不同模式顯示不同列集。更多示例官方動態(tài)列控制https://www.jeasyui.com/tutorial/datagrid/datagrid18.php列菜單 Demohttps://www.jeasyui.com/demo/main/index.php?pluginDataGridpitemContextMenuColumns如果需要保存用戶列設置到 localStorage、根據(jù)權(quán)限自動隱藏列、或動態(tài)改變列標題/格式化器的完整示例請繼續(xù)提問