深圳网站建设网站制作网站推广专业app开发公司

深圳网站建设网站制作网站推广,专业app开发公司,金融网站模板免费下载,百度点击软件找名风jQuery EasyUI 数据网格 - 动态改变列 datagrid 支持在运行时动态显示/隐藏列、添加新列、移除列、改变列标题/宽度/对齐方式等操作。这在实际应用中非常实用#xff0c;例如#xff1a; 用户个性化表格视图#xff08;选择显示哪些列#xff09;根据权限动态隐藏敏感列切…jQuery EasyUI 数据网格 - 动态改变列datagrid支持在运行时动态显示/隐藏列、添加新列、移除列、改变列标题/宽度/对齐方式等操作。这在实际应用中非常实用例如用户个性化表格视图选择显示哪些列根据权限动态隐藏敏感列切换不同数据视图模式官方参考动态列示例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: 创建基本 DataGrid包含较多列tableiddgclasseasyui-datagridtitle用户管理动态列示例stylewidth:900px;height:500pxdata-optionsurl:get_users.php,fitColumns:true,pagination:true,rownumbers:true,singleSelect:truetheadtrthfieldidwidth80ID/ththfieldusernamewidth100用户名/ththfieldnamewidth100姓名/ththfieldemailwidth180邮箱/ththfieldphonewidth120电话/ththfieldaddresswidth200地址/ththfieldregdatewidth100注册日期/ththfieldlastloginwidth150最后登录/ththfieldstatuswidth80formatterformatStatus状态/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 实现动态改变列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);}// 重置列恢复初始状态functionresetColumns(){varfields$(#dg).datagrid(getColumnFields);for(vari0;ifields.length;i){$(#dg).datagrid(hideColumn,fields[i]);}showAllColumns();// 再全部显示}// 状态格式化示例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核心方法总结方法说明$(#dg).datagrid(showColumn, field)显示指定列$(#dg).datagrid(hideColumn, field)隐藏指定列$(#dg).datagrid(getColumnFields)获取所有列字段名数组$(#dg).datagrid(getColumnOption, field)获取指定列的完整配置对象含 hidden 属性$(#dg).datagrid(resize)隐藏/显示列后调用确保布局正确高级用法动态添加/移除新列不常见但可能// 添加新列需重新定义 columnsfunctionaddNewColumn(){varnewColumns[{field:newfield,title:新列,width:100}];$(#dg).datagrid({columns:[originalColumns.concat(newColumns)]});}完整效果点击按钮可快速显示/隐藏列。使用下拉菜单勾选/取消列显示。右键表头弹出列控制菜单高级体验。表格自动调整布局。实际应用场景用户个性化设置记住用户偏好列结合 localStorage。权限控制根据角色隐藏敏感列如工资、身份证。多视图切换不同模式显示不同列集。更多示例官方动态列控制https://www.jeasyui.com/tutorial/datagrid/datagrid18.php列菜单 Demohttps://www.jeasyui.com/demo/main/index.php?pluginDataGridpitemContextMenuColumns如果需要保存用户列设置到 localStorage、根据权限自动隐藏列、或动态改变列标题/格式化器的完整示例请继续提问