jQuery EasyUI 树形菜单 - 树形网格添加分页
jQuery EasyUI 树形网格（TreeGrid） - 添加分页
jQuery EasyUI 的 TreeGrid继承自 DataGrid，因此支持pagination: true属性来启用分页功能。但由于 TreeGrid 是层级结构，分页通常只针对顶级根节点进行（子节点通过动态加载展开）。
有两种常见实现方式：
- 服务器端分页（Server Side Pagination）：推荐用于大数据量。分页只加载当前页的根节点，子节点按需动态加载。
- 客户端分页（Client Side Pagination）：一次性加载全部数据，在前端模拟分页（适合数据量不大）。
示例1：服务器端分页 + 动态加载子节点（推荐）
启用分页后，TreeGrid 会自动发送page、rows和id参数：
- 首次加载/翻页：
id=0（或无），返回当前页根节点。 - 展开节点：
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:800px;height:500px"data-options="url:'treegrid_pagination.php', method:'get', idField:'id', treeField:'name', pagination: true, pageSize: 10, rownumbers: true, 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_pagination.php）
<?php$page=isset($_GET['page'])?intval($_GET['page']):1;$rows=isset($_GET['rows'])?intval($_GET['rows']):10;$id=isset($_GET['id'])?intval($_GET['id']):0;// 父节点ID// 模拟数据库（实际替换为你的查询）$allRoots=50;// 假设有50个根节点if($id>0){// 返回子节点（不分页）$children=array();for($i=1;$i<=5;$i++){$children[]=array('id'=>$id*10+$i,'name'=>'子节点 '.($id*10+$i),'size'=>rand(100,1000).'KB','date'=>'2025-12-17');}echojson_encode($children);}else{// 返回当前页根节点 + total$offset=($page-1)*$rows;$data=array();for($i=$offset+1;$i<=$offset+$rows&&$i<=$allRoots;$i++){$data[]=array('id'=>$i,'name'=>'根节点 '.$i,'size'=>'','date'=>'2025-12-17','state'=>'closed'// 有子节点时设置closed，显示展开图标);}$result=array('total'=>$allRoots,'rows'=>$data);echojson_encode($result);}?>关键点：
- 根节点需设置
"state": "closed"以显示展开图标。 - 返回格式：翻页时
{total: N, rows: [...]}；加载子节点时直接数组[{...}, {...}]。
示例2：客户端分页（一次性加载全部数据）
适用于数据量不大的场景。通过扩展loadFilter实现仅分页顶级节点，已展开的子节点会附加显示。
完整代码（基于官方 Demo）
<tableid="tg"class="easyui-treegrid"style="width:700px;height:500px"data-options="url:'treegrid_full_data.json', idField:'id', treeField:'name', pagination: true, pageSize: 10"><thead><tr><thfield="name"width="300">名称</th><thfield="size"width="100">大小</th><thfield="date"width="150">日期</th></tr></thead></table><scripttype="text/javascript">functionpagerFilter(data){if(typeofdata.length=='number'&&typeofdata.splice=='function'){// 判断数据是否是数组data={total:data.length,rows:data}}vardg=$(this);varopts=dg.treegrid('options');varpager=dg.treegrid('getPager');pager.pagination({onSelectPage:function(pageNum,pageSize){opts.pageNumber=pageNum;opts.pageSize=pageSize;pager.pagination('refresh',{pageNumber:pageNum,pageSize:pageSize});dg.treegrid('loadData',data);}});if(!data.originalRows){data.originalRows=data.rows;}vartopRows=[];varchildRows=[];$.each(data.originalRows,function(i,row){if(row._parentId){childRows.push(row);}else{topRows.push(row);}});data.total=topRows.length;varstart=(opts.pageNumber-1)*parseInt(opts.pageSize);varend=start+parseInt(opts.pageSize);data.rows=$.extend(true,[],topRows.slice(start,end).concat(childRows));returndata;}$(function(){$('#tg').treegrid({loadFilter:pagerFilter}).treegrid('clientPaging');});</script>官方参考
- 服务器端分页教程：https://www.jeasyui.com/tutorial/tree/treegrid4.php
- 服务器端分页 Demo：https://www.jeasyui.com/tutorial/tree/treegrid4_demo.html
- 客户端分页 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid&theme=default&dir=ltr&pitem=Server%20Side%20Pagination (选择 Server Side Pagination 或 Client Side Pagination)
注意：TreeGrid 的分页不像普通 DataGrid 那样对所有行分页，而是主要针对根节点。如果需要更复杂的层级分页，可能需自定义扩展。
如果需要结合搜索、编辑或其他功能，或你的后端语言具体代码，请提供更多细节！