jQuery EasyUI 数据网格 – 动态改变列（长文解析）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

引言：为什么需要动态改变数据网格的列？

在现代 Web 开发中，数据展示的灵活性是提升用户体验的关键。jQuery EasyUI 的数据网格（DataGrid）组件凭借其强大的功能，成为开发者快速构建交互式表格的首选工具。然而，随着业务需求的多样化，静态列布局已无法满足复杂场景。想象一下，当用户希望根据自身偏好选择显示哪些列，或者系统需要根据数据类型动态调整列宽时，静态配置显然会成为限制。因此，掌握如何动态改变数据网格的列，如同给表格装上了"变形金刚"般的可调节功能，让数据展示真正实现"随需应变"。

本文将从基础概念入手，通过分步示例和实际案例，系统讲解如何在 jQuery EasyUI 数据网格中实现列的动态增删、属性调整及可视化效果优化。无论您是刚接触 EasyUI 的新手，还是希望提升现有项目灵活性的中级开发者，都能在此找到实用的解决方案。

一、数据网格基础：理解列配置的骨架

1.1 列配置的核心结构

数据网格的列配置以 JSON 格式定义，每个列对象包含以下核心属性：

示例基础配置：

columns: [[
    {field: 'id', title: '用户ID', width: 80, align: 'right'},
    {field: 'name', title: '姓名', width: 150, sortable: true}
]]

1.2 动态需求的典型场景

• 用户自定义视图：允许用户通过勾选框选择显示的列
• 响应式布局：根据屏幕尺寸自动调整列宽
• 数据驱动变化：根据返回数据动态生成新列
• 权限控制：根据用户角色隐藏/显示特定列

二、动态改变列的三步实现法

2.1 第一步：获取数据网格实例

在操作列前，需要通过唯一标识符获取数据网格对象：

var dg = $('#mydatagrid').datagrid();

2.2 第二步：核心操作方法解析

EasyUI 提供以下关键方法实现列动态调整：

2.2.1 添加新列

通过 insertColumn 或 appendColumn 方法：

// 在指定位置插入新列
dg.datagrid('insertColumn', {
    index: 1, 
    field: 'newColumn', 
    title: '新列', 
    width: 100
});

// 追加列到末尾
dg.datagrid('appendColumn', {
    field: 'anotherColumn', 
    title: '附加列'
});

2.2.2 移除现有列

使用 removeColumn 方法：

// 移除指定字段的列
dg.datagrid('removeColumn', 'name');

// 移除所有列
dg.datagrid('removeAllColumns');

2.2.3 更新列属性

通过 updateColumn 方法：

// 动态修改列标题和宽度
dg.datagrid('updateColumn', {
    field: 'id',
    title: '唯一标识',
    width: 120
});

2.3 第三步：数据同步与视图刷新

修改列后需调用 reload 方法重新加载数据：

dg.datagrid('reload');

三、实战案例：可配置的用户信息表

3.1 场景描述

构建一个用户信息表，允许用户选择显示哪些列，并实时保存配置。

3.2 HTML结构

<!-- 数据网格容器 -->
<table id="userGrid"></table>

<!-- 列配置面板 -->
<div id="columnConfig">
    <label><input type="checkbox" checked> 用户ID</label>
    <label><input type="checkbox" checked> 姓名</label>
    <label><input type="checkbox"> 邮箱</label>
    <label><input type="checkbox"> 注册时间</label>
</div>

3.3 JavaScript实现

$(function(){
    // 初始化数据网格
    $('#userGrid').datagrid({
        url: '/api/users',
        columns: [[
            {field:'id', title:'用户ID', width:80},
            {field:'name', title:'姓名', width:150},
            {field:'email', title:'邮箱', width:200},
            {field:'regTime', title:'注册时间', width:150}
        ]]
    });

    // 绑定复选框事件
    $('#columnConfig input').change(function(){
        var selected = [];
        $(':checked', '#columnConfig').each(function(){
            selected.push($(this).next().text());
        });
        
        // 动态更新列配置
        updateColumns(selected);
    });

    // 列更新函数
    function updateColumns(visibleColumns){
        var dg = $('#userGrid').datagrid();
        var allColumns = dg.datagrid('getColumns')[0];
        
        allColumns.forEach(function(col){
            if(visibleColumns.includes(col.title)){
                dg.datagrid('showColumn', col.field);
            }else{
                dg.datagrid('hideColumn', col.field);
            }
        });
    }
});

3.4 关键点解析

• 使用 showColumn/hideColumn 方法替代直接增删，保持数据绑定关系
• 通过 getColumns 方法获取当前列配置，避免硬编码维护
• 列标题与复选框文本需严格对应以确保匹配准确性

四、进阶技巧：数据驱动的智能列配置

4.1 根据数据类型自动生成列

当数据源字段不确定时，可通过解析数据动态生成列：

$.ajax({
    url: '/api/dynamicColumns',
    success: function(data){
        var columns = data.map(function(field){
            return {
                field: field.name,
                title: field.label,
                width: field.width || 120
            };
        });
        
        $('#dynamicGrid').datagrid({
            columns: [columns]
        });
    }
});

4.2 响应式列宽调整

结合浏览器窗口尺寸动态调整列宽：

$(window).resize(function(){
    var width = $(window).width();
    $('#responsiveGrid').datagrid('resize',{
        width: width,
        fitColumns: true // 自动调整列宽填满表格
    });
});

4.3 复杂渲染与事件绑定

在动态列中嵌入按钮和事件处理：

// 添加带有操作按钮的列
dg.datagrid('appendColumn', {
    field: 'actions',
    title: '操作',
    formatter: function(value,row,index){
        return '<a href="#" class="edit-btn">编辑</a> | '+
               '<a href="#" class="delete-btn">删除</a>';
    }
});

// 延迟绑定事件
dg.find('.edit-btn').click(function(e){
    e.preventDefault();
    // 获取当前行数据
    var row = dg.datagrid('getSelected');
    // 执行编辑逻辑
});

五、常见问题与解决方案

5.1 列顺序混乱怎么办？

当频繁增删列时，可保存列配置到本地存储：

// 保存当前列配置
localStorage.setItem('columns', JSON.stringify(dg.datagrid('getColumnFields')));

// 恢复列配置
var savedColumns = JSON.parse(localStorage.getItem('columns'));
savedColumns.forEach(function(field){
    dg.datagrid('moveColumn', {field: field, index: i++});
});

5.2 列宽调整后数据错位？

确保设置 fit: true 或 fitColumns: true：

$('#myGrid').datagrid({
    fitColumns: true // 自动调整列宽填满表格
});

5.3 动态列无法排序？

需在更新列时重新声明 sortable 属性：

dg.datagrid('updateColumn', {
    field: 'price',
    sortable: true
});

结语：构建智能数据展示系统

通过掌握数据网格的动态列操作技术，开发者能够构建出高度适应用户需求的交互界面。这种能力如同给数据表格装上了"智能神经系统"，使其能随用户行为和业务场景的变化自动调整形态。建议在实际项目中结合本地存储保存用户偏好，通过服务端API动态加载列配置，最终实现真正意义上的"数据可视化随需应变"。随着对 EasyUI 组件深入理解，您还可以探索列过滤、虚拟滚动等高级功能，持续提升数据展示的灵活性与用户体验。

提示：本文案例代码可在 GitHub Gist 或 CodePen 中直接运行测试，具体实现细节可根据实际业务需求灵活调整。