jQuery EasyUI 树形网格（TreeGrid） – 创建基础树形网格
jQuery EasyUI 的 TreeGrid（树形网格）是基于 DataGrid 扩展的组件，用于显示带有层级关系的表格数据。它结合了树视图（Tree）和可编辑网格的功能，支持展开/折叠子节点。
要创建一个基础的 TreeGrid，需要注意以下关键属性：
idField：节点的唯一 ID 字段（通常为 ‘id’）。treeField：显示为树节点的字段（通常为名称字段，如 ‘name’），这里会显示展开/折叠图标。
示例：静态数据创建基础 TreeGrid（文件夹浏览器）
以下是一个完整的 HTML 示例，使用静态数据创建一个简单的文件夹浏览树形网格。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI TreeGrid 基础示例</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>基础 TreeGrid 示例 - 文件夹浏览器</h2>
<table id="tg" class="easyui-treegrid" style="width:600px;height:400px"
data-options="
rownumbers: true,
idField: 'id',
treeField: 'name',
lines: true">
<thead>
<tr>
<th field="name" width="250">名称</th>
<th field="size" width="100" align="right">大小</th>
<th field="date" width="150">修改日期</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>name: 'Applications'</td>
<td></td>
<td>2025-01-01</td>
<td children="[
{id:11, name:'EasyUI', size:'2MB', date:'2025-12-01'},
{id:12, name:'jQuery', size:'1MB', date:'2025-11-01'}
]"></td>
</tr>
<tr id="2">
<td>name: 'Documents'</td>
<td></td>
<td>2025-02-01</td>
<td children="[
{id:21, name:'Report.pdf', size:'500KB', date:'2025-12-10'}
]"></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function(){
$('#tg').treegrid({
data: [
{
id: 1,
name: 'Applications',
date: '2025-01-01',
children: [
{id: 11, name: 'EasyUI', size: '2MB', date: '2025-12-01'},
{id: 12, name: 'jQuery', size: '1MB', date: '2025-11-01'}
]
},
{
id: 2,
name: 'Documents',
date: '2025-02-01',
children: [
{id: 21, name: 'Report.pdf', size: '500KB', date: '2025-12-10'}
]
}
]
});
});
</script>
</body>
</html>示例：从 JSON 文件加载数据
更常见的做法是从服务器或 JSON 文件加载数据。
HTML 部分：
<table id="tg" title="文件夹浏览器" class="easyui-treegrid"
style="width:700px;height:400px"
data-options="
url: 'treegrid_data.json',
method: 'get',
rownumbers: true,
idField: 'id',
treeField: 'name',
lines: true">
<thead>
<tr>
<th field="name" width="220">名称</th>
<th field="size" width="100" align="right">大小</th>
<th field="date" width="150">修改日期</th>
</tr>
</thead>
</table>treegrid_data.json 示例内容：
[
{
"id": 1,
"name": "Applications",
"size": "",
"date": "2025-01-01",
"children": [
{"id": 11, "name": "EasyUI", "size": "2MB", "date": "2025-12-01"},
{"id": 12, "name": "jQuery", "size": "1MB", "date": "2025-11-01"}
]
},
{
"id": 2,
"name": "Documents",
"size": "",
"date": "2025-02-01",
"children": [
{"id": 21, "name": "Report.pdf", "size": "500KB", "date": "2025-12-10"}
]
}
]说明
- treeField：指定哪一列显示树节点（带展开图标）。
- idField：节点 ID，用于识别父子关系。
- 数据结构：根节点数组，每个节点可包含
children数组表示子节点。 - 更多高级功能（如动态加载、分页、编辑等）可参考官方文档：https://www.jeasyui.com/documentation/treegrid.php 或 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid
如果需要更复杂的示例（如动态加载或编辑），请提供更多细节！
