以下是以资深软件开发工程师的视角，对“jQuery EasyUI 数据网格 – 创建列组合（Column Grouping）”的专业回答。我将详细讲解 jQuery EasyUI 中数据网格（DataGrid）如何实现列组合（Column Grouping），包括基础用法、高级配置和动态数据处理，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 jQuery EasyUI 的最新版本为参考。
jQuery EasyUI 数据网格 – 创建列组合（Column Grouping）
目录
1. 引言
jQuery EasyUI 的数据网格（DataGrid）支持列组合（Column Grouping），通过将相关列分组展示，提升数据的可读性和组织性。本教程将从基础到高级，带你掌握如何在 DataGrid 中创建列组合，并提供实用示例。
2. 列组合概述
2.1 什么是列组合？
- 定义：列组合是指在 DataGrid 中将多个列归入一个共同的标题组，形成多层表头结构。
- 实现方式：通过
frozenColumns（固定列）和columns（普通列）的多维数组定义分组。
2.2 列组合的应用场景
- 数据分类：如将“姓名”和“年龄”归入“个人信息”组。
- 复杂报表：展示财务或统计数据的多维度表头。
- 参考：jQuery EasyUI 官方文档 DataGrid 列分组部分（jeasyui.com/documentation）。
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 使用 frozenColumns 和 columns
- 方法：在
frozenColumns或columns中定义多层数组，第一层为组标题（带colspan），第二层为具体列。 - 示例：
$('#dg').datagrid({
columns: [
[
{ title: '个人信息', colspan: 2 },
{ title: '订单信息', colspan: 2 }
],
[
{ field: 'name', title: '姓名', width: 100 },
{ field: 'age', title: '年龄', width: 100 },
{ field: 'orderId', title: '订单ID', width: 100 },
{ field: 'amount', title: '金额', width: 100 }
]
]
});
3.3 实例：基础列组合
以下是一个基础列组合的完整示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<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>
.container { max-width: 600px; margin: 20px auto; }
</style>
</head>
<body>
<div class="container">
<h1>基础列组合</h1>
<table id="dg" class="easyui-datagrid" style="width:100%;height:250px"
data-options="
rownumbers: true,
singleSelect: true">
</table>
</div>
<script>
// 示例数据和列定义
$('#dg').datagrid({
columns: [
[
{ title: '个人信息', colspan: 2 },
{ title: '订单信息', colspan: 2 }
],
[
{ field: 'name', title: '姓名', width: 150 },
{ field: 'age', title: '年龄', width: 100, align: 'right' },
{ field: 'orderId', title: '订单ID', width: 100 },
{ field: 'amount', title: '金额', width: 100, align: 'right' }
]
],
data: {
rows: [
{ name: '张三', age: 30, orderId: 'O001', amount: 100.5 },
{ name: '李四', age: 25, orderId: 'O002', amount: 200.75 },
{ name: '王五', age: 28, orderId: 'O003', amount: 150.0 }
]
}
});
</script>
</body>
</html>
- 运行方法：保存为 HTML 文件，在浏览器中打开。
- 效果：显示 3 行数据，表头分为“个人信息”（姓名、年龄）和“订单信息”（订单ID、金额）两组。
4. 高级列组合配置
4.1 动态生成列组合
- 方法：根据数据动态生成列分组，使用 JavaScript 构造
columns数组。 - 示例：
var groupColumns = [
[
{ title: '基本信息', colspan: 2 },
{ title: '财务信息', colspan: 2 }
],
[
{ field: 'id', title: 'ID', width: 100 },
{ field: 'name', title: '名称', width: 150 },
{ field: 'income', title: '收入', width: 100, align: 'right' },
{ field: 'expense', title: '支出', width: 100, align: 'right' }
]
];
$('#dg').datagrid({ columns: groupColumns });
4.2 结合复选框和分页
- 方法：将复选框放入
frozenColumns，并启用pagination。 - 示例：
frozenColumns: [[
{ field: 'ck', checkbox: true }
]],
columns: [
[
{ title: '个人信息', colspan: 2 },
{ title: '订单信息', colspan: 2 }
],
[
{ field: 'name', title: '姓名', width: 150 },
{ field: 'age', title: '年龄', width: 100 },
{ field: 'orderId', title: '订单ID', width: 100 },
{ field: 'amount', title: '金额', width: 100 }
]
],
pagination: true
4.3 实例：动态列组合与分页
以下是一个结合复选框、分页和服务器端数据的动态列组合示例：
前端代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<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>
.container { max-width: 600px; margin: 20px auto; }
</style>
</head>
<body>
<div class="container">
<h1>动态列组合与分页</h1>
<table id="dg" class="easyui-datagrid" style="width:100%;height:300px"
data-options="
url: 'get_data.php',
frozenColumns: [[
{ field: 'ck', checkbox: true, width: 50 }
]],
columns: [
[
{ title: '个人信息', colspan: 2 },
{ title: '订单信息', colspan: 2 }
],
[
{ field: 'name', title: '姓名', width: 150 },
{ field: 'age', title: '年龄', width: 100, align: 'right' },
{ field: 'orderId', title: '订单ID', width: 100 },
{ field: 'amount', title: '金额', width: 100, align: 'right' }
]
],
pagination: {
pageSize: 5,
pageList: [5, 10, 20],
beforePageText: '第',
afterPageText: '页，共 {pages} 页',
displayMsg: '显示 {from} 到 {to}，共 {total} 条'
},
rownumbers: true,
singleSelect: false">
</table>
</div>
</body>
</html>
后端代码（get_data.php）
<?php
header('Content-Type: application/json');
// 获取分页参数
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rows = isset($_GET['rows']) ? intval($_GET['rows']) : 5;
$offset = ($page - 1) * $rows;
// 模拟数据
$total = 15; // 总记录数
$data = [];
for ($i = $offset + 1; $i <= min($offset + $rows, $total); $i++) {
$data[] = [
'name' => '用户 ' . $i,
'age' => 20 + $i,
'orderId' => 'O' . str_pad($i, 3, '0', STR_PAD_LEFT),
'amount' => $i * 50.5
];
}
// 返回分页数据
echo json_encode([
'total' => $total,
'rows' => $data
]);
?>
- 运行方法：
- 将 HTML 保存为
index.html，PHP 保存为get_data.php。 - 使用本地服务器（如 XAMPP）运行，确保 PHP 环境可用。
- 效果：
- 显示 15 条数据的分页视图，每页 5 条，带复选框（固定列）。
- 表头分为“个人信息”和“订单信息”两组，支持全选和分页切换。
5. 最佳实践与注意事项
5.1 设计与实现建议
- 分组清晰：确保列分组逻辑明确，避免用户混淆。
- 宽度调整：为每列设置合理的
width，确保表头和数据对齐。
5.2 性能优化与调试
- 性能：动态列较多时，优先使用服务器端数据加载。
- 调试：检查
columns定义和分页数据，确保分组和内容匹配。
6. 结论
jQuery EasyUI 的数据网格通过多层 columns 定义实现了列组合功能，适用于复杂的表头展示需求。本文通过基础和高级示例展示了实现过程，帮助你快速上手。如果需要复选框支持，可参考 添加复选框 或访问 jQuery EasyUI 官方文档（jeasyui.com）。
回答特点
- 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
- 实用性：从静态分组到动态分页与复选框结合，覆盖实际需求。
- 内部链接：通过
<a href="#ID">跳转，如 实现基础列组合。 - 出站链接：嵌入正文，指向官方文档。
如何运行
- 基础示例直接保存为 HTML 文件打开即可；高级示例需配置本地服务器运行 PHP 文件。
发表回复