本文详解如何使用jQuery EasyUI创建包含冻结列和多行表头的复杂树形网格。通过配置frozen属性固定左侧区域，利用colspan合并表头单元格，并启用showFooter显示汇总数据。结合完整HTML代码与JSON数据源示例，帮助开发者快速实现高效的数据展示界面。

复杂树形网格效果预览

在构建复杂数据展示界面时，我们通常需要将关键信息（如地区名称）固定在左侧，同时将详细数据（如各季度销售额）排列在右侧，并通过多行表头区分不同年份的数据。下图展示了最终实现的树形网格效果：

前置准备与环境配置

在开始编码之前，请确保您的开发环境满足以下条件：

• jQuery库：确保已引入jQuery核心库。
• EasyUI核心文件：引入 jquery.easyui.min.js 和 jquery.easyui.min.css。
• 主题文件：引入您所需的EasyUI主题CSS文件（如 default/easyui.css）。
• 数据源：准备一个返回JSON格式数据的后端接口或本地JSON文件。

实现步骤详解

第1步：定义HTML表格结构

树形网格基于标准的

首先，在HTML中创建一个表格，并添加 class="easyui-treegrid" 以启用EasyUI组件功能。关键属性配置如下：

• title：表格标题。
• url：异步加载数据的URL地址。
• rownumbers：设置为 true 以显示行号。
• showFooter：设置为 true 以显示页脚汇总行。
• idField：指定数据中唯一标识字段的名称（如 id）。
• treeField：指定用于显示树形结构的字段名称（如 region）。

第2步：配置冻结列（Frozen Columns）

为了实现左侧列的固定效果，我们需要在 标签内定义冻结列。EasyUI通过 frozen="true" 属性来识别冻结区域。

在 中创建一个 ，并在其中的 标签上设置 frozen="true"。这将确保“Region”列在水平滚动时保持固定。

    
        Region
    

此时，field="region" 对应数据中的地区字段，width="150" 设定了列宽。这一步实现了左侧固定区域的核心逻辑。

第3步：构建多行表头（Multi-row Header）

为了展示更复杂的数据结构（如按年份和季度分类），我们需要在冻结列之后定义普通表头，并利用 colspan 属性合并单元格。

在第一个 之后，添加第二个 标签。在这个区域中：

1. 年份合并：第一行表头使用 colspan="4" 将四个季度列合并为一个“年份”单元格（如2009、2010）。
2. 季度明细：第二行表头定义具体的季度字段（f1 到 f8），分别对应各年份的四个季度。

    
        2009
        2010
    
    
        1st qrt.
        2nd qrt.
        3rd qrt.
        4th qrt.
        1st qrt.
        2nd qrt.
        3rd qrt.
        4th qrt.
    

注意：align="right" 用于数值型数据的右对齐，提升可读性。

第4步：准备JSON数据源

树形网格需要特定格式的JSON数据来渲染。数据必须包含 id、region 以及各季度的数值字段（f1-f8）。此外，为了支持 showFooter="true"，数据中应包含 _parentId 为 -1 或特定标识的汇总节点，或者由后端直接返回包含 footer 字段的数据。

以下是一个示例数据源 treegrid2_data.json 的结构：

[
    {
        "id": 1,
        "region": "North America",
        "f1": 2345,
        "f2": 5678,
        "f3": 9012,
        "f4": 3456,
        "f5": 7890,
        "f6": 1234,
        "f7": 5678,
        "f8": 9012,
        "children": [
            {
                "id": 2,
                "region": "United States",
                "f1": 1234,
                "f2": 5678,
                "f3": 9012,
                "f4": 3456,
                "f5": 7890,
                "f6": 1234,
                "f7": 5678,
                "f8": 9012
            },
            {
                "id": 3,
                "region": "Canada",
                "f1": 1111,
                "f2": 2222,
                "f3": 3333,
                "f4": 4444,
                "f5": 5555,
                "f6": 6666,
                "f7": 7777,
                "f8": 8888
            }
        ]
    },
    {
        "id": 4,
        "region": "Europe",
        "f1": 2345,
        "f2": 5678,
        "f3": 9012,
        "f4": 3456,
        "f5": 7890,
        "f6": 1234,
        "f7": 5678,
        "f8": 9012
    }
]

如果需要在页脚显示总计，后端应返回一个包含 footer 数组的对象，或者在客户端通过EasyUI的 onLoadSuccess 事件手动计算并渲染页脚。

常见问题与调整

问题1：冻结列与右侧内容错位

表现：当浏览器窗口大小改变或数据加载失败时，冻结列与右侧数据列出现水平错位。

原因：通常是由于表格宽度未正确设置，或者在动态调整窗口大小时未触发EasyUI的 resize 事件。

解决方法：确保表格容器有明确的宽度（如 style="width:550px"）。在窗口大小改变时，手动调用 $('#tt').treegrid('resize')。

问题2：多行表头显示异常

表现：表头单元格高度不一致，或者 colspan 合并区域显示错误。

原因：EasyUI对多行表头的支持依赖于正确的 嵌套结构。如果混用了 rowspan 和 colspan，或者表头结构不符合HTML规范，可能导致渲染错误。

解决方法：严格遵循示例中的结构，先定义冻结列的 ，再定义普通表头的 。确保每个 的 field 属性与JSON数据中的字段名完全一致。

问题3：页脚（Footer）不显示

表现：设置了 showFooter="true"，但表格底部没有显示汇总数据。

原因：EasyUI默认不会自动计算页脚数据。如果后端没有返回包含 footer 字段的数据，或者前端没有通过代码手动渲染页脚，页脚将保持为空。

解决方法： 1. 后端处理：在返回的JSON中添加 footer 数组，包含各列的汇总值。 2. 前端处理：在 onLoadSuccess 事件中，遍历数据计算各列总和，并使用 setFooterRow 方法更新页脚。

$('#tt').treegrid({
    onLoadSuccess: function(row, data){
        // 示例：手动计算并设置页脚
        var footer = {id: '__footer__', region: 'Total'};
        // 计算各季度总和...
        $('#tt').treegrid('setFooterRow', footer);
    }
});

总结

通过本文的教程，我们掌握了如何使用jQuery EasyUI创建复杂的树形网格。关键点包括：

• 使用 frozen="true" 实现左侧列的固定。
• 利用 colspan 构建多行表头，以展示层次化数据。
• 通过 showFooter="true" 和后端/前端配合实现数据汇总。

这种布局方式特别适用于需要同时查看分类信息和详细数值数据的场景，如财务报表、销售数据分析等。开发者可根据实际需求调整列宽、对齐方式和数据源结构。

以上就是jQuery EasyUI创建复杂树形网格的详细内容，更多关于jQuery EasyUI的资料请关注本站其它相关文章！