layui树形表格展开：行展开与子树显示
项目地址: https://gitcode.com/GitHub_Trending/la/layui 还在为复杂层级数据的可视化展示而烦恼？layui树形表格（treeTable）的行展开与子树显示功能，让你轻松构建多级数据结构的交互式表格，实现数据的层次化管理和直观展示。
什么是树形表格展开功能？
树形表格展开是layui treeTable组件的核心功能之一，它允许用户通过点击展开/折叠图标来显示或隐藏子节点数据。这种交互方式特别适合展示具有父子关系的层级数据，如组织架构、分类目录、文件系统等场景。
核心功能特性
| 功能特性 | 描述 | 适用场景 |
|---|---|---|
| 单节点展开 | 点击单个节点的展开图标控制该节点的子节点显示 | 精确控制特定节点的展开状态 |
| 批量展开/折叠 | 通过API一次性展开或折叠所有节点 | 快速查看全部数据或收起所有层级 |
| 异步加载 | 支持按需异步加载子节点数据 | 大数据量时的性能优化 |
| 级联操作 | 展开父节点时自动展开所有子节点 | 快速展开完整子树 |
| 状态回调 | 提供展开前后的回调函数 | 自定义展开逻辑和业务处理 |
基础展开配置
初始化树形表格
首先需要引入layui并配置treeTable组件：
<!-- 引入layui -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.9.0/dist/css/layui.min.css">
<script src="https://cdn.jsdelivr.net/npm/layui@2.9.0/dist/layui.min.js"></script>
<!-- 表格容器 -->
<table id="treeTableDemo" lay-filter="treeTableDemo"></table>
<script>
layui.use(['treeTable'], function(){
var treeTable = layui.treeTable;
// 渲染树形表格
var inst = treeTable.render({
elem: '#treeTableDemo',
url: '/api/tree-data', // 数据接口
tree: {
view: {
expandAllDefault: false // 默认不展开所有节点
}
},
cols: [[
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '名称', width: 200},
{field: 'type', title: '类型', width: 100},
{field: 'createTime', title: '创建时间', width: 150}
]]
});
});
</script>
数据结构要求
树形表格支持两种数据格式：
1. 嵌套结构（默认）
{
"code": 0,
"data": [
{
"id": 1,
"name": "父节点1",
"children": [
{
"id": 11,
"name": "子节点1-1",
"children": [
{"id": 111, "name": "孙节点1-1-1"}
]
}
]
}
]
}
2. 平铺结构（需要配置isSimpleData）
{
"code": 0,
"data": [
{"id": 1, "name": "父节点1", "parentId": null},
{"id": 11, "name": "子节点1-1", "parentId": 1},
{"id": 111, "name": "孙节点1-1-1", "parentId": 11}
]
}
展开控制API详解
1. expandNode - 控制单个节点展开
expandNode方法用于精确控制特定节点的展开状态：
// 展开指定节点
treeTable.expandNode('treeTableDemo', {
index: 0, // 节点索引（可通过tr元素的data-index属性获取）
expandFlag: true, // true:展开, false:关闭, null:切换
inherit: false, // 是否级联操作子节点
callbackFlag: true // 是否触发回调事件
});
// 切换节点状态（展开/关闭）
treeTable.expandNode('treeTableDemo', {
index: 0,
expandFlag: null // null表示切换状态
});
2. expandAll - 批量展开所有节点
expandAll方法用于一次性展开或折叠所有节点：
// 展开所有节点
treeTable.expandAll('treeTableDemo', true);
// 折叠所有节点
treeTable.expandAll('treeTableDemo', false);
3. 事件监听与回调
树形表格提供了丰富的事件回调机制：
treeTable.render({
elem: '#treeTableDemo',
tree: {
callback: {
// 展开前回调
beforeExpand: function(tableId, trData, expandFlag) {
console.log('即将展开节点:', trData.name);
// 返回false可阻止展开操作
// if (trData.id === 1) return false;
},
// 展开后回调
onExpand: function(tableId, trData, expandFlag) {
console.log('节点已' + (expandFlag ? '展开' : '折叠'), trData.name);
}
}
}
});
高级展开场景实战
场景1：异步加载子树数据
对于大数据量的场景，可以使用异步加载优化性能：
treeTable.render({
elem: '#treeTableDemo',
tree: {
async: {
enable: true, // 开启异步加载
url: '/api/async-children',
autoParam: ['parentId=id'] // 自动传递父节点ID参数
}
}
});
// 手动重载异步节点
treeTable.reloadAsyncNode('treeTableDemo', 0);
场景2：自定义展开图标与样式
treeTable.render({
elem: '#treeTableDemo',
tree: {
view: {
flexIconOpen: '<i class="layui-icon layui-icon-down"></i>',
flexIconClose: '<i class="layui-icon layui-icon-right"></i>',
iconOpen: '<i class="layui-icon layui-icon-folder-open"></i>',
iconClose: '<i class="layui-icon layui-icon-folder"></i>',
iconLeaf: '<i class="layui-icon layui-icon-file"></i>',
indent: 20 // 缩进量
}
}
});
场景3：动态控制展开状态
// 根据业务条件动态展开节点
function expandSpecificNodes() {
var allData = treeTable.getData('treeTableDemo');
allData.forEach(function(item, index) {
if (item.type === 'category') {
treeTable.expandNode('treeTableDemo', {
index: item.LAY_DATA_INDEX,
expandFlag: true
});
}
});
}
// 保存和恢复展开状态
var expandedStates = {};
function saveExpandedStates() {
var allData = treeTable.getData('treeTableDemo');
allData.forEach(function(item) {
if (item.LAY_EXPAND) {
expandedStates[item.id] = true;
}
});
}
function restoreExpandedStates() {
Object.keys(expandedStates).forEach(function(id) {
var node = treeTable.getNodeById('treeTableDemo', id);
if (node) {
treeTable.expandNode('treeTableDemo', {
index: node.dataIndex,
expandFlag: true
});
}
});
}
性能优化与最佳实践
1. 大数据量优化策略
2. 内存管理建议
// 定期清理不再需要的节点数据
function cleanupTreeTable() {
var tableId = 'treeTableDemo';
var allData = treeTable.getData(tableId);
// 只保留最近活跃的节点
allData.forEach(function(item) {
if (!item.LAY_EXPAND && Date.now() - item.lastAccess > 3600000) {
treeTable.removeNode(tableId, item.LAY_DATA_INDEX);
}
});
}
// 监听页面可见性变化
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
// 页面不可见时折叠所有节点
treeTable.expandAll('treeTableDemo', false);
}
});
常见问题与解决方案
Q1: 展开节点后页面滚动异常？
A: 这是由于DOM重排导致的，可以通过以下方式解决：
treeTable.render({
scrollPos: 'fixed' // 保持滚动条位置
});
Q2: 异步加载超时或失败？
A: 实现重试机制：
treeTable.render({
tree: {
async: {
enable: true,
url: '/api/data',
error: function(xhr, status) {
if (status === 'timeout') {
layer.msg('加载超时，正在重试...');
setTimeout(function() {
treeTable.reloadAsyncNode('treeTableDemo', currentExpandingIndex);
}, 2000);
}
}
}
}
});
Q3: 如何实现懒加载？
A: 结合滚动监听实现：
var loading = false;
$('.layui-table-body').scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(this)[0].scrollHeight;
var clientHeight = $(this).height();
if (scrollTop + clientHeight >= scrollHeight - 50 && !loading) {
loading = true;
loadMoreData();
}
});
function loadMoreData() {
// 加载更多数据的逻辑
}
总结
layui树形表格的展开功能提供了强大而灵活的层级数据展示能力。通过掌握基本的展开API、了解高级应用场景、遵循性能优化最佳实践，你可以构建出既美观又高效的树形数据界面。
记住关键要点：
- 合理选择数据格式（嵌套vs平铺）
- 适时使用异步加载优化性能
- 利用事件回调实现业务逻辑
- 注意内存管理和滚动优化
现在就开始使用layui treeTable，让你的层级数据展示变得更加优雅和高效！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
