在使用 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 的列展示，适应不同业务场景下的数据呈现需求。
