jQuery EasyUI 数据网格设置冻结列的方法

在使用 jQuery EasyUI 数据网格时，当表格列数较多需要水平滚动，关键列容易移出可视区域。通过设置冻结列功能，可固定指定列位置，提升数据浏览体验。本文将演示两种实现方式及关键配置要点。

使用 JavaScript 配置 frozenColumns

冻结列的核心是通过 frozenColumns 属性定义需要固定的列。该属性的数据结构与 columns 完全一致，支持相同的字段配置。以下示例展示了如何通过 JavaScript 初始化数据网格并设置冻结列：

$('#tt').datagrid({
    title:'Frozen Columns',
    iconCls:'icon-save',
    width:500,
    height:250,
    url:'data/datagrid_data.json',
    frozenColumns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:80},
    ]],
    columns:[[
        {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}
    ]]
});
在上述代码中，frozenColumns 数组内的列（Item ID 和 Product ID）将始终显示在表格左侧，即使用户拖动水平滚动条，这些列也不会移出视图。其余列则正常跟随滚动。
HTML 声明式实现冻结列
如果希望减少 JavaScript 代码量，可以直接在 HTML 中通过声明式语法创建数据网格。只需在需要冻结的  标签上添加 frozen="true" 属性即可：

    

        

            
Item ID
            
Product ID
        
    
    

        

            
List Price
            
Unit Cost
            
Attribute
            
Stauts
        
    
该方式无需编写初始化脚本，EasyUI 会自动解析 class="easyui-datagrid" 并应用配置。冻结列的渲染逻辑与 JavaScript 方式完全一致。
使用注意事项与场景建议
冻结列适用于列数较多、且左侧包含关键标识信息（如编号、名称）的表格场景。使用时需注意以下几点：
列宽计算：冻结列的总宽度不应超过数据网格的可视宽度，否则可能导致布局异常或滚动条失效。
性能影响：冻结列会额外生成独立的 DOM 结构，若冻结列过多或数据量极大，可能轻微影响渲染性能。
对齐一致性：冻结列与非冻结列的行高、边框样式需保持一致，避免出现视觉错位。
合理配置冻结列可显著提升复杂表格的可读性，建议在实际项目中结合数据特征进行列分组设计。