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 资源

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

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

<table id="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>
            <th field="id" width="80">ID</th>
            <th field="username" width="100">用户名</th>
            <th field="name" width="100">姓名</th>
            <th field="email" width="180">邮箱</th>
            <th field="phone" width="120">电话</th>
            <th field="address" width="200">地址</th>
            <th field="regdate" width="100">注册日期</th>
            <th field="lastlogin" width="150">最后登录</th>
            <th field="status" width="80" formatter="formatStatus">状态</th>
        </tr>
    </thead>
</table>

<!-- 列控制按钮 -->
<div style="margin:10px 0;">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-show" onclick="showAllColumns()">显示所有列</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-hide" onclick="hideSomeColumns()">隐藏部分列</a>
    <a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#columnMenu',iconCls:'icon-setting'">列设置</a>
</div>

<!-- 右键列菜单（可选） -->
<div id="columnMenu" class="easyui-menu" style="width:150px;">
    <div data-options="name:'username'">用户名</div>
    <div data-options="name:'email'">邮箱</div>
    <div data-options="name:'phone'">电话</div>
    <div data-options="name:'address'">地址</div>
    <div data-options="name:'lastlogin'">最后登录</div>
    <div class="menu-sep"></div>
    <div onclick="showAllColumns()">显示所有</div>
    <div onclick="resetColumns()">重置列</div>
</div>

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

<script type="text/javascript">
    // 保存初始列配置（用于重置）
    var originalColumns = $('#dg').datagrid('getColumnFields');

    // 显示所有列
    function showAllColumns(){
        var fields = $('#dg').datagrid('getColumnFields');
        for(var i=0; i<fields.length; i++){
            $('#dg').datagrid('showColumn', fields[i]);
        }
    }

    // 隐藏部分列（示例）
    function hideSomeColumns(){
        $('#dg').datagrid('hideColumn', 'address');
        $('#dg').datagrid('hideColumn', 'phone');
        $('#dg').datagrid('hideColumn', 'lastlogin');
    }

    // 重置列（恢复初始状态）
    function resetColumns(){
        var fields = $('#dg').datagrid('getColumnFields');
        for(var i=0; i<fields.length; i++){
            $('#dg').datagrid('hideColumn', fields[i]);
        }
        showAllColumns();  // 再全部显示
    }

    // 状态格式化（示例）
    function formatStatus(value){
        return value == 1 ? '启用' : '禁用';
    }

    // 列设置菜单点击事件
    $(function(){
        $('#columnMenu').menu({
            onClick: function(item){
                var field = 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>

核心方法总结

方法	说明
$('#dg').datagrid('showColumn', 'field')	显示指定列
$('#dg').datagrid('hideColumn', 'field')	隐藏指定列
$('#dg').datagrid('getColumnFields')	获取所有列字段名数组
$('#dg').datagrid('getColumnOption', 'field')	获取指定列的完整配置对象（含 hidden 属性）
$('#dg').datagrid('resize')	隐藏/显示列后调用，确保布局正确

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

// 添加新列（需重新定义 columns）
function addNewColumn(){
    var newColumns = [
        {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、根据权限自动隐藏列、或动态改变列标题/格式化器的完整示例，请继续提问！