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 部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>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: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>
<th field="name" width="300">名称</th>
<th field="size" width="100" align="right">大小</th>
<th field="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'
);
}
echo json_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
);
echo json_encode($result);
}
?>关键点：
- 根节点需设置
"state": "closed"以显示展开图标。 - 返回格式：翻页时
{total: N, rows: [...]}；加载子节点时直接数组[{...}, {...}]。
示例2：客户端分页（一次性加载全部数据）
适用于数据量不大的场景。通过扩展 loadFilter 实现仅分页顶级节点，已展开的子节点会附加显示。
完整代码（基于官方 Demo）
<table id="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>
<th field="name" width="300">名称</th>
<th field="size" width="100">大小</th>
<th field="date" width="150">日期</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // 判断数据是否是数组
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.treegrid('options');
var pager = 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;
}
var topRows = [];
var childRows = [];
$.each(data.originalRows, function(i, row){
if (row._parentId){
childRows.push(row);
} else {
topRows.push(row);
}
});
data.total = topRows.length;
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = $.extend(true,[],topRows.slice(start, end).concat(childRows));
return data;
}
$(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 那样对所有行分页，而是主要针对根节点。如果需要更复杂的层级分页，可能需自定义扩展。
如果需要结合搜索、编辑或其他功能，或你的后端语言具体代码，请提供更多细节！
