jQuery EasyUI 树形菜单 - 树形网格动态加载
jQuery EasyUI 树形网格（TreeGrid） - 动态加载（按需加载子节点）
jQuery EasyUI TreeGrid 支持两种常见的“动态加载”方式：
服务器端按需加载（On-Demand Loading / Remote Lazy Loading）
最常见场景：首次加载根节点，展开节点时向服务器请求该节点的子节点数据（推荐用于大数据量）。客户端懒加载（Client Lazy Loading）
一次性从服务器获取全部层级数据，但首次只显示根节点，展开时在客户端逐步追加子节点（适用于已知全部数据但想避免一次性渲染过多节点）。
下面分别提供完整示例。
示例1：服务器端按需动态加载（推荐）
TreeGrid 会自动在展开节点时向服务器发送参数id（父节点ID），服务器根据id返回子节点数组。
HTML 部分
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>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:700px;height:500px"data-options="url:'treegrid_dynamic.php', <!-- 服务器脚本 --> method:'get', rownumbers: true, idField:'id', treeField:'name', lines: true"><thead><tr><thfield="name"width="300">名称</th><thfield="size"width="100"align="right">大小</th><thfield="date"width="150">修改日期</th></tr></thead></table></body></html>服务器端示例（treegrid_dynamic.php）
<?php// 获取父节点ID（首次加载根节点时 id 为 null 或不存在）$parentId=isset($_GET['id'])?$_GET['id']:null;// 模拟数据（实际从数据库查询）$data=array();if($parentId==null){// 根节点$data[]=array('id'=>1,'name'=>'Applications','size'=>'','date'=>'2025-01-01','state'=>'closed');$data[]=array('id'=>2,'name'=>'Documents','size'=>'','date'=>'2025-02-01','state'=>'closed');}elseif($parentId==1){// Applications 的子节点$data[]=array('id'=>11,'name'=>'EasyUI','size'=>'2MB','date'=>'2025-12-01');$data[]=array('id'=>12,'name'=>'jQuery','size'=>'1MB','date'=>'2025-11-01');}elseif($parentId==2){// Documents 的子节点$data[]=array('id'=>21,'name'=>'Report.pdf','size'=>'500KB','date'=>'2025-12-10');}echojson_encode($data);?>关键点：
- 有子节点的父节点需设置
"state": "closed"，这样才会显示展开图标。 - 首次请求无
id参数，返回根节点。 - 展开时自动带
id参数请求子节点。
示例2：客户端懒加载（一次性加载全部数据，但逐步渲染）
适用于已获取完整层级数据，但想避免一次性渲染大量节点。
HTML 部分
<tableid="tg"class="easyui-treegrid"title="客户端懒加载 TreeGrid"style="width:700px;height:500px"data-options="url:'treegrid_full_data.json', method:'get', rownumbers: true, idField:'id', treeField:'name', lines: true, loadFilter: myLoadFilter"><thead><tr><thfield="name"width="300">名称</th><thfield="size"width="100"align="right">大小</th><thfield="date"width="150">修改日期</th></tr></thead></table><scripttype="text/javascript">functionmyLoadFilter(data,parentId){functionsetData(){vartodo=[];for(vari=0;i<data.length;i++){todo.push(data[i]);}while(todo.length){varnode=todo.shift();if(node.children){node.state='closed';// 有子节点时关闭node.children1=node.children;// 临时保存子节点node.children=undefined;// 清空，避免立即加载todo=todo.concat(node.children1);}}}setData(data);varopts=$(this).treegrid('options');opts.onBeforeExpand=function(row){if(row.children1){$(this).treegrid('append',{parent:row[opts.idField],data:row.children1});row.children1=undefined;$(this).treegrid('expand',row[opts.idField]);}returnrow.children1==undefined;// 已加载则不再触发};returndata;}</script>treegrid_full_data.json（完整层级数据示例，与基础示例相同）
官方参考
- 服务器端动态加载：https://www.jeasyui.com/tutorial/tree/treegrid3.php
- 客户端懒加载：https://www.jeasyui.com/tutorial/tree/treegrid5.php
- Demo 页面：https://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid （查看 Dynamic Loading 和 Lazy Loading 示例）
如果需要结合分页、编辑或其他功能，或提供你的后端语言（PHP/Java/Node 等），我可以给出更具体的服务器端代码！