以下是以资深软件开发工程师的视角，对“jQuery EasyUI 数据网格 – 设置冻结列（Frozen Columns）”的专业回答。我将详细讲解如何在 jQuery EasyUI 的数据网格（DataGrid）中设置冻结列，包括基础用法、高级配置和动态应用，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 jQuery EasyUI 的最新稳定版（1.10.x）为参考。

jQuery EasyUI 数据网格 – 设置冻结列（Frozen Columns）

目录

  1. 引言
  2. 冻结列概述
  1. 实现基础冻结列
  1. 高级冻结列配置
  1. 最佳实践与注意事项
  1. 结论

1. 引言

jQuery EasyUI 的数据网格（DataGrid）支持冻结列（Frozen Columns）功能，允许用户在水平滚动时固定某些列，保持关键信息始终可见。本教程将从基础到高级，带你掌握如何在 DataGrid 中设置冻结列，并提供实用示例。

2. 冻结列概述

2.1 什么是冻结列？

  • 定义：冻结列是 DataGrid 中固定不随水平滚动移动的列，通常用于显示重要字段，如 ID 或名称。
  • 实现方式：通过 frozenColumns 属性定义冻结列，与普通 columns 属性结合使用。

2.2 冻结列的应用场景

  • 数据对比：在宽表格中固定索引列，便于对比其他字段。
  • 用户体验：保持关键信息可见，提升操作效率。
  • 参考：jQuery EasyUI 官方文档 DataGrid Frozen Columns 部分（jeasyui.com）。

3. 实现基础冻结列

3.1 准备工作

  • 引入依赖：需要 jQuery、EasyUI 的核心文件和主题文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">

3.2 创建基础冻结列

  • 方法：在 DataGrid 配置中定义 frozenColumns 和 columns，前者为冻结列，后者为可滚动列。
  • 示例：
$('#dg').datagrid({
  frozenColumns: [[
    { field: 'id', title: 'ID', width: 100 }
  ]],
  columns: [[
    { field: 'name', title: '名称', width: 200 },
    { field: 'price', title: '价格', width: 150 }
  ]]
});

3.3 实例：基础冻结列

以下是一个基础冻结列的完整示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery EasyUI 基础冻结列</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    body { padding: 20px; }
  </style>
</head>
<body>
  <div class="container">
    <h2>基础冻结列</h2>
    <table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px;"></table>
  </div>
  <script>
    $('#dg').datagrid({
      data: [
        { id: 1, name: '项目 A', price: 100, category: '电子', stock: 50 },
        { id: 2, name: '项目 B', price: 200, category: '服装', stock: 30 },
        { id: 3, name: '项目 C', price: 300, category: '书籍', stock: 20 }
      ],
      frozenColumns: [[
        { field: 'id', title: 'ID', width: 100 }
      ]],
      columns: [[
        { field: 'name', title: '名称', width: 200 },
        { field: 'price', title: '价格', width: 150 },
        { field: 'category', title: '类别', width: 150 },
        { field: 'stock', title: '库存', width: 150 }
      ]]
    });
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：显示一个表格，ID 列冻结在左侧，水平滚动时保持可见，其余列（名称、价格等）可滚动。

4. 高级冻结列配置

4.1 冻结列与动态调整

  • 动态调整：通过 frozenColumns 和 columns 方法动态更新冻结列。
  • 示例：
function freezeNameColumn() {
  $('#dg').datagrid({
    frozenColumns: [[
      { field: 'id', title: 'ID', width: 100 },
      { field: 'name', title: '名称', width: 200 }
    ]],
    columns: [[
      { field: 'price', title: '价格', width: 150 }
    ]]
  });
}

4.2 冻结列与交互功能

  • 交互：结合排序、格式化或事件增强冻结列功能。
  • 示例：冻结列支持排序：
{ field: 'id', title: 'ID', width: 100, sortable: true }

4.3 实例：带交互的动态冻结列

以下是一个带交互和动态冻结列的示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery EasyUI 带交互的动态冻结列</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    body { padding: 20px; }
    .btn { margin: 5px; }
  </style>
</head>
<body>
  <div class="container">
    <h2>带交互的动态冻结列</h2>
    <button class="btn easyui-linkbutton" onclick="freezeName()">冻结名称列</button>
    <button class="btn easyui-linkbutton" onclick="unfreezeName()">解冻名称列</button>
    <table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px;"></table>
  </div>
  <script>
    var data = [
      { id: 1, name: '项目 A', price: 100, category: '电子', stock: 50 },
      { id: 2, name: '项目 B', price: 200, category: '服装', stock: 30 },
      { id: 3, name: '项目 C', price: 300, category: '书籍', stock: 20 }
    ];

    var defaultFrozen = [[
      { field: 'id', title: 'ID', width: 100, sortable: true }
    ]];
    var defaultColumns = [[
      { field: 'name', title: '名称', width: 200, sortable: true },
      { field: 'price', title: '价格', width: 150, formatter: function(value) { return '¥' + value; } },
      { field: 'category', title: '类别', width: 150 },
      { field: 'stock', title: '库存', width: 150 }
    ]];

    $('#dg').datagrid({
      data: data,
      frozenColumns: defaultFrozen,
      columns: defaultColumns,
      onSortColumn: function(sort, order) {
        $.messager.show({ title: '排序', msg: `按 ${sort} ${order} 排序`, timeout: 2000, showType: 'slide' });
      }
    });

    function freezeName() {
      var frozen = $('#dg').datagrid('options').frozenColumns[0];
      var columns = $('#dg').datagrid('options').columns[0];
      if (!frozen.find(col => col.field === 'name')) {
        frozen.push({ field: 'name', title: '名称', width: 200, sortable: true });
        columns.splice(columns.findIndex(col => col.field === 'name'), 1);
        $('#dg').datagrid({
          frozenColumns: [frozen],
          columns: [columns]
        });
        $.messager.show({ title: '提示', msg: '已冻结名称列', timeout: 2000, showType: 'slide' });
      }
    }

    function unfreezeName() {
      var frozen = $('#dg').datagrid('options').frozenColumns[0];
      var columns = $('#dg').datagrid('options').columns[0];
      var nameIdx = frozen.findIndex(col => col.field === 'name');
      if (nameIdx !== -1) {
        columns.unshift(frozen.splice(nameIdx, 1)[0]);
        $('#dg').datagrid({
          frozenColumns: [frozen],
          columns: [columns]
        });
        $.messager.show({ title: '提示', msg: '已解冻名称列', timeout: 2000, showType: 'slide' });
      }
    }
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：
  • 初始冻结 ID 列，其余列可滚动。
  • 点击“冻结名称列”将名称列移至冻结区；点击“解冻名称列”移回滚动区，操作后弹出提示。
  • 冻结列支持排序，点击标题触发提示。

5. 最佳实践与注意事项

5.1 设计与实现建议

  • 冻结数量：冻结列不宜过多，以免占用过多可视区域。
  • 列一致性：确保冻结列和普通列的字段与数据匹配。
  • 用户反馈：通过提示框（如 $.messager）通知冻结状态变化。

5.2 性能优化与调试

  • 性能：动态调整冻结列时，避免频繁重绘，保持列数组操作高效。
  • 调试：检查 frozenColumns 和 columns 是否正确同步，确认滚动行为正常。

6. 结论

jQuery EasyUI 的冻结列通过 frozenColumns 属性为 DataGrid 提供了灵活的固定列功能，适用于宽表格场景。本文通过基础和高级示例展示了其用法，帮助你快速上手。如果需要动态列管理，可参考 jQuery EasyUI 动态改变列 或访问官方文档（jeasyui.com）。

回答特点

  • 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
  • 实用性：从基础冻结到动态交互，覆盖实际需求。
  • 内部链接：通过 <a href="#ID"> 跳转，如 实现基础冻结列。
  • 出站链接：嵌入正文，指向官方文档。

如何运行

  • 直接保存为 HTML 文件，在浏览器中打开即可（需联网加载 CDN 资源）。