layui treetable不支持原生分页,所谓“树形分页”实为伪分页:仅对根节点分页,子节点通过懒加载随父节点展开,不参与分页计数;直接套用table的laypage会导致子节点丢失、层级错乱、折叠状态失效。

Layui 本身不支持 treeTable 的原生分页,所谓“树形结构分页”,本质是伪分页:只对根节点(一级节点)做分页,子节点随父节点懒加载展开,不参与分页计数。
treeTable 分页为什么不能用 table 的 laypage?
因为 treeTable 渲染后所有节点(含子节点)都塞进同一个 <table> DOM 中,而 <code>laypage 是对 table 数据数组做切片渲染——一旦开启树形结构,原始数据就不是扁平数组,而是嵌套对象;直接传给 laypage 会丢子节点、错层级、折叠状态丢失。
- 你看到的“分页条”如果只是控制根节点数量,那没问题;但若想让第 2 页也显示某父节点的子节点,
laypage无能为力 - 官方
treeTable模块(v2.1+)压根没暴露分页参数,limit、page等字段传了也无效 - 强行用
table.render()+ 手动拼 children 数据 → 子节点无法响应式联动(如复选框父子勾选、展开状态不记忆)
真实可用的分页方案:只分根节点 + 懒加载子节点
这是目前最稳定、Layui 生态内广泛验证过的做法,适用于绝大多数后台管理场景(如权限菜单、商品类目、组织架构)。
- 后端接口返回两层结构:第一页只返回根节点列表(带
hasChildren: true/false字段),不含任何子节点数据 - 前端初始化
treetable.render()时,设置tree: true和lazy: true,并指定url为「按 parent_id 加载子节点」的专用接口 - 分页组件(
laypage)独立挂载在表格上方/下方,监听jump事件,每次切换页码时:$.get('/api/nodes?page=2&limit=10', ...)重新拉取根节点,再调用treetable.reload()刷新整表 - 关键点:reload 时必须传
where: { page: 2, limit: 10 },且不要传data(否则懒加载失效)
示例 reload 调用:
laypage.render({
elem: 'pageDemo',
count: total, // 总根节点数(后端需额外提供)
limit: 10,
curr: 1,
jump: function(obj, first){
if(!first){
treetable.reload('treeTableID', {
where: { page: obj.curr, limit: obj.limit },
page: { curr: obj.curr }
});
}
}
});
treeGrid 插件能真分页吗?
第三方插件 treeGrid(如 fly.layui.com/extend/treeGrid)确实封装了分页逻辑,但它仍是“模拟分页”:内部把全部树数据一次性拉下来,前端 JS 做扁平化 + 分页切片,再重新构造成带缩进的 DOM。这带来三个硬伤:
- 首屏加载慢:1000+ 节点时 JSON 体积大,解析卡顿明显
- 内存占用高:所有节点保留在 JS 对象里,浏览器容易卡死
- 无法服务端排序:分页后的数据顺序由前端控制,父子层级可能被切散(比如第 1 页末尾是父节点,第 2 页开头是它的子节点)
所以除非数据量恒定 ≤ 200 条且层级 ≤ 3,否则不建议用 treeGrid 的内置分页。
容易被忽略的关键细节
很多人卡在 reload 后子节点点不开,或者分页跳转后折叠状态全丢了——问题往往出在这几处:
-
treetable.reload()必须传id(即初始化时的id配置项),不能只靠elem;漏传会导致新数据渲染但旧实例未更新 - 后端返回的根节点数据中,每个对象必须含
id和parentId(或你配置的treeId/treeUpId字段),且值类型要一致(全字符串 or 全数字),混用会导致子节点加载请求发错parentId - 懒加载子节点的接口,返回数据必须是数组,且每个子项仍要带
hasChildren字段;否则下级箭头不显示,无法继续展开 - 如果用了
done回调做自定义操作,注意它在 reload 后也会触发两次(初始化一次、reload 一次),别在里面重复绑定事件











