jQuery EasyUI 树形菜单 - 创建基础树形网格
jQuery EasyUI 树形网格（TreeGrid） - 创建基础树形网格
jQuery EasyUI 的TreeGrid（树形网格）是基于 DataGrid 扩展的组件，用于显示带有层级关系的表格数据。它结合了树视图（Tree）和可编辑网格的功能，支持展开/折叠子节点。
要创建一个基础的 TreeGrid，需要注意以下关键属性：
idField：节点的唯一 ID 字段（通常为 ‘id’）。treeField：显示为树节点的字段（通常为名称字段，如 ‘name’），这里会显示展开/折叠图标。
示例：静态数据创建基础 TreeGrid（文件夹浏览器）
以下是一个完整的 HTML 示例，使用静态数据创建一个简单的文件夹浏览树形网格。
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>EasyUI TreeGrid 基础示例</title><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body><h2>基础 TreeGrid 示例 - 文件夹浏览器</h2><tableid="tg"class="easyui-treegrid"style="width:600px;height:400px"data-options="rownumbers: true, idField:'id', treeField:'name', lines: true"><thead><tr><thfield="name"width="250">名称</th><thfield="size"width="100"align="right">大小</th><thfield="date"width="150">修改日期</th></tr></thead><tbody><trid="1"><td>name: 'Applications'</td><td></td><td>2025-01-01</td><tdchildren="[ {id:11, name:'EasyUI', size:'2MB', date:'2025-12-01'}, {id:12, name:'jQuery', size:'1MB', date:'2025-11-01'} ]"></td></tr><trid="2"><td>name: 'Documents'</td><td></td><td>2025-02-01</td><tdchildren="[ {id:21, name:'Report.pdf', size:'500KB', date:'2025-12-10'} ]"></td></tr></tbody></table><scripttype="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 部分：
<tableid="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><thfield="name"width="220">名称</th><thfield="size"width="100"align="right">大小</th><thfield="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
如果需要更复杂的示例（如动态加载或编辑），请提供更多细节！