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 数据网格凭借其丰富的组件和直观的交互设计，成为开发者构建表格的常用工具。随着数据量的增加，表格的横向滚动需求变得频繁，此时若能将关键列固定在左侧或右侧，既能提升用户体验，又能减少操作失误。本文将深入讲解如何在 EasyUI 数据网格中设置冻结列，通过循序渐进的步骤、形象比喻和实战案例，帮助读者掌握这一实用技能。

基本概念：冻结列的意义与应用场景

1. 什么是冻结列？

冻结列（Frozen Columns）是指在表格横向滚动时，始终保持可见的固定列。例如，在员工信息表中，将“姓名”和“部门”列设置为冻结列，即使其他列向右滚动，这两个列始终留在左侧，便于快速定位数据。

形象比喻：
可以将冻结列想象为火车轨道的固定轨道，其他列则是可以移动的车厢。无论车厢如何移动，轨道始终静止，确保关键信息不被遮挡。

2. 典型应用场景

• 高频数据对比：在财务报表中，冻结“日期”和“项目名称”列，方便用户滚动查看不同时间点的数值。
• 分类信息固定：在电商后台中，冻结“商品类别”列，确保用户切换商品时能快速识别分类归属。
• 关键字段锁定：在管理系统中，冻结“用户 ID”或“订单号”，避免滚动时误操作其他列的数据。

核心配置：冻结列的实现步骤

1. 初始化数据网格

在使用冻结列前，需先创建一个基础的 EasyUI 数据网格。以下是一个简单的 HTML 结构示例：

<table id="dataGrid"></table>

<script>
    $(function() {
        $('#dataGrid').datagrid({
            url: '/api/data',  // 数据接口地址
            columns: [[
                { field: 'id', title: 'ID', width: 80 },
                { field: 'name', title: '姓名', width: 120 },
                { field: 'department', title: '部门', width: 150 },
                { field: 'salary', title: '薪资', width: 100 }
            ]],
            fitColumns: true,
            pagination: true
        });
    });
</script>

2. 添加冻结列配置

要启用冻结列，需在 columns 参数中将固定列与普通列分开定义。具体步骤如下：

1. 将 columns 属性设置为一个包含两个子数组的二维数组。
2. 第一个子数组定义冻结列，第二个子数组定义普通列。

代码示例：

$('#dataGrid').datagrid({
    columns: [
        [  // 冻结列
            { field: 'id', title: 'ID', width: 80 },
            { field: 'name', title: '姓名', width: 120 }
        ],
        [  // 普通列
            { field: 'department', title: '部门', width: 150 },
            { field: 'salary', title: '薪资', width: 100 }
        ]
    ]
});

3. 关键参数解释

深入实践：完整案例解析

案例背景

假设我们有一个员工管理系统，需要展示以下信息：

• 冻结列：员工 ID、姓名、部门
• 普通列：入职日期、薪资、联系方式

HTML 结构

<table id="employeeGrid" style="width: 100%; height: 500px;"></table>

JavaScript 配置代码

$(function() {
    $('#employeeGrid').datagrid({
        url: '/api/employees',  // 假设的接口地址
        fitColumns: true,
        pagination: true,
        columns: [
            [  // 冻结列
                { field: 'id', title: '员工 ID', width: 100 },
                { field: 'name', title: '姓名', width: 120 },
                { field: 'department', title: '部门', width: 150 }
            ],
            [  // 普通列
                { field: 'hireDate', title: '入职日期', width: 120 },
                { field: 'salary', title: '薪资', width: 100 },
                { field: 'contact', title: '联系方式', width: 180 }
            ]
        ],
        onLoadSuccess: function() {
            console.log('数据加载成功');
        }
    });
});

关键点说明

1. fitColumns 参数：
   当设置为 true 时，EasyUI 会自动调整列宽，确保所有列填满表格容器。若需自定义列宽，可将其设为 false。

2. onLoadSuccess 回调：
   在数据加载完成后触发，可用于执行其他逻辑（如初始化筛选或高亮特定行）。

常见问题与解决方案

问题 1：冻结列未生效

原因：

• columns 参数未正确拆分为两个子数组。
• 冻结列字段名与数据源字段名不匹配。

解决方案：
检查代码结构，确保冻结列位于第一个子数组，并验证数据接口返回的字段名是否一致。

问题 2：冻结列宽度异常

原因：

• 列宽设置过小或过大，导致布局错乱。

解决方案：
调整 width 参数，或通过 fitColumns: true 自动适配。

问题 3：滚动时冻结列抖动

原因：
浏览器渲染性能不足，或数据量过大导致。

解决方案：

• 优化数据接口，减少单次加载数据量。
• 使用 pageSize 参数分页加载。

进阶技巧：动态设置冻结列

场景需求

在某些场景下，用户可能需要动态切换冻结列。例如，根据角色权限隐藏或显示特定冻结列。

实现方法

通过 fix 属性动态控制列的冻结状态：

// 获取当前列配置
var columns = $('#employeeGrid').datagrid('getColumnFields', true /* 冻结列 */);

// 动态添加冻结列
columns.push({ field: 'newFrozen', title: '新冻结列', width: 120 });

// 重新加载配置
$('#employeeGrid').datagrid('loadData', { rows: [] });  // 清空数据后重新渲染

结论

通过本文的讲解，读者应能掌握 jQuery EasyUI 数据网格 – 设置冻结列 的核心方法，并通过案例理解其实现逻辑。冻结列不仅提升了数据展示的可读性，还优化了用户体验，是开发复杂表格应用的必备技能。建议读者在实际项目中结合业务场景灵活调整配置，例如通过 CSS 自定义冻结列的样式，或结合筛选、排序功能进一步增强表格的交互性。

如需深入探索 EasyUI 的其他功能（如分页、排序、自定义事件），可参考官方文档或实践更多案例。编程是一场永无止境的探索，希望本文能为你的前端开发之路提供一份清晰的指南。