jQuery EasyUI 数据网格 - 动态改变列

jQuery EasyUI 数据网格 - 动态改变列

datagrid支持在运行时动态显示/隐藏列、添加新列、移除列、改变列标题/宽度/对齐方式等操作。这在实际应用中非常实用，例如：

• 用户个性化表格视图（选择显示哪些列）
• 根据权限动态隐藏敏感列
• 切换不同数据视图模式

官方参考：

• 动态列示例：https://www.jeasyui.com/tutorial/datagrid/datagrid18.php
• 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Context+Menu+Columns

步骤 1: 引入 EasyUI 资源

<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

步骤 2: 创建基本 DataGrid（包含较多列）

<tableid="dg"class="easyui-datagrid"title="用户管理（动态列示例）"style="width:900px;height:500px"data-options="url:'get_users.php',fitColumns:true,pagination:true,rownumbers:true,singleSelect:true"><thead><tr><thfield="id"width="80">ID</th><thfield="username"width="100">用户名</th><thfield="name"width="100">姓名</th><thfield="email"width="180">邮箱</th><thfield="phone"width="120">电话</th><thfield="address"width="200">地址</th><thfield="regdate"width="100">注册日期</th><thfield="lastlogin"width="150">最后登录</th><thfield="status"width="80"formatter="formatStatus">状态</th></tr></thead></table><!-- 列控制按钮 --><divstyle="margin:10px 0;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-show"onclick="showAllColumns()">显示所有列</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-hide"onclick="hideSomeColumns()">隐藏部分列</a><ahref="javascript:void(0)"class="easyui-menubutton"data-options="menu:'#columnMenu',iconCls:'icon-setting'">列设置</a></div><!-- 右键列菜单（可选） --><divid="columnMenu"class="easyui-menu"style="width:150px;"><divdata-options="name:'username'">用户名</div><divdata-options="name:'email'">邮箱</div><divdata-options="name:'phone'">电话</div><divdata-options="name:'address'">地址</div><divdata-options="name:'lastlogin'">最后登录</div><divclass="menu-sep"></div><divonclick="showAllColumns()">显示所有</div><divonclick="resetColumns()">重置列</div></div>

步骤 3: JavaScript 实现动态改变列

<scripttype="text/javascript">// 保存初始列配置（用于重置）varoriginalColumns=$('#dg').datagrid('getColumnFields');// 显示所有列functionshowAllColumns(){varfields=$('#dg').datagrid('getColumnFields');for(vari=0;i<fields.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(vari=0;i<fields.length;i++){$('#dg').datagrid('hideColumn',fields[i]);}showAllColumns();// 再全部显示}// 状态格式化（示例）functionformatStatus(value){returnvalue==1?'启用':'禁用';}// 列设置菜单点击事件$(function(){$('#columnMenu').menu({onClick:function(item){varfield=item.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>

核心方法总结

高级用法：动态添加/移除新列（不常见，但可能）

// 添加新列（需重新定义 columns）functionaddNewColumn(){varnewColumns=[{field:'newfield',title:'新列',width:100}];$('#dg').datagrid({columns:[originalColumns.concat(newColumns)]});}

完整效果

• 点击按钮可快速显示/隐藏列。
• 使用下拉菜单勾选/取消列显示。
• 右键表头弹出列控制菜单（高级体验）。
• 表格自动调整布局。

实际应用场景

• 用户个性化设置：记住用户偏好列（结合 localStorage）。
• 权限控制：根据角色隐藏敏感列（如工资、身份证）。
• 多视图切换：不同模式显示不同列集。

更多示例：

• 官方动态列控制：https://www.jeasyui.com/tutorial/datagrid/datagrid18.php
• 列菜单 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Context+Menu+Columns

如果需要保存用户列设置到 localStorage、根据权限自动隐藏列、或动态改变列标题/格式化器的完整示例，请继续提问！