jQuery EasyUI DataGrid 动态改变列的实现方法

在使用 jQuery EasyUI 构建数据表格时，经常需要根据业务场景动态调整显示的列。通过重新调用 datagrid 方法并传入新的 columns 配置，即可实现列的实时切换。本文将演示具体实现步骤，并提供代码示例与效果对比，帮助开发者快速掌握该功能。

创建初始 DataGrid 表格

数据网格（DataGrid）的列通常通过 columns 属性进行定义。首先，使用 HTML 标签初始化一个 DataGrid 实例，并设置基础属性：

接着，通过 JavaScript 配置初始列结构：

$('#tt').datagrid({
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'attr1',title:'Attribute',width:200},
        {field:'status',title:'Status',width:80}
    ]]
});

运行页面后，表格将按上述列配置渲染数据，效果如下：

动态改变列配置

当需要切换列结构时，无需销毁或重建整个表格。只需再次调用 datagrid 方法，并传入新的 columns 数组即可：

$('#tt').datagrid({
    columns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
        {field:'listprice',title:'List Price',width:80,align:'right'},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
        {field:'attr1',title:'Attribute',width:100},
        {field:'status',title:'Status',width:60}
    ]]
});

执行上述代码后，表格将自动更新列定义，新增 listprice 和 unitcost 字段，并调整部分列的宽度与对齐方式。更新后的效果如下：

实现注意事项

在动态更新列时，需注意以下关键点：

• 保留已有配置：重新调用 datagrid 方法时，仅需传递需要修改的属性（如 columns）。原有的 url、width、height 等配置会自动保留，无需重复定义。
• 列字段匹配：新列配置中的 field 值需与数据源字段保持一致，否则对应列将无法正确渲染数据。
• 性能优化：频繁切换列配置可能影响渲染性能，建议在用户交互触发时按需更新，避免不必要的重复调用。

通过上述方法，开发者可以灵活控制 DataGrid 的列展示，适应不同业务场景下的数据呈现需求。