Layui Tree组件实现节点展开状态持久化方案

概述

在使用Layui框架的Tree组件开发分类树功能时，经常会遇到需要保持节点展开状态的需求。特别是在维护包含大量节点的分类树时，每次刷新页面后都需要重新展开节点，给用户操作带来不便。本文将详细介绍如何实现Layui Tree组件节点展开状态的持久化存储方案。

技术实现原理

实现Tree组件节点状态持久化的核心思路是通过规范化树形数据，结合浏览器本地存储机制，在页面卸载前保存节点状态，页面加载时恢复这些状态。

具体实现步骤

1. 数据规范化处理

首先需要创建一个规范化函数，确保每个树节点都包含spread属性：

function normalizeTreeData(data) {
  return data.map(node => {
    // 确保每个节点都有spread属性
    if (typeof node.spread === 'undefined') {
      node.spread = false;
    }
    
    // 递归处理子节点
    if (node.children && node.children.length > 0) {
      node.children = normalizeTreeData(node.children);
    }
    
    return node;
  });
}

2. 从存储中恢复状态

在页面初始化时，从sessionStorage中读取之前保存的节点状态：

function restoreNodeStates(data) {
  const savedStates = JSON.parse(sessionStorage.getItem('treeNodeStates') || '{}');
  
  return data.map(node => {
    if (savedStates[node.id]) {
      node.spread = savedStates[node.id];
    }
    
    if (node.children && node.children.length > 0) {
      node.children = restoreNodeStates(node.children);
    }
    
    return node;
  });
}

3. 初始化Tree组件

在渲染Tree组件前，先对数据进行规范化处理并恢复状态：

layui.use(['tree'], function() {
  const tree = layui.tree;
  
  // 原始树数据
  const rawData = [...]; 
  
  // 规范化并恢复状态
  const processedData = restoreNodeStates(normalizeTreeData(rawData));
  
  // 渲染Tree组件
  const instance = tree.render({
    elem: '#tree-container',
    data: processedData,
    id: 'treeDemo'
  });
});

4. 保存节点状态

在页面卸载前，将当前Tree的展开状态保存到sessionStorage中：

function saveNodeStates(treeInstance) {
  const states = {};
  
  // 递归收集节点状态
  function collectStates(nodes) {
    nodes.forEach(node => {
      states[node.id] = node.spread;
      
      if (node.children && node.children.length > 0) {
        collectStates(node.children);
      }
    });
  }
  
  // 从tree实例获取当前数据
  const currentData = treeInstance.config.data;
  collectStates(currentData);
  
  // 保存到sessionStorage
  sessionStorage.setItem('treeNodeStates', JSON.stringify(states));
}

// 监听页面卸载事件
window.addEventListener('beforeunload', function() {
  saveNodeStates(treeInstance);
});

注意事项

1. 节点标识：确保每个树节点都有唯一的id属性，这是状态恢复的关键。

2. 存储限制：sessionStorage有大小限制(通常5MB)，对于特别大的树结构需要考虑其他存储方案。

3. 性能考虑：对于深层级的大树，递归操作可能影响性能，建议进行优化。

4. 多树实例：如果页面有多个Tree实例，需要为每个实例单独保存状态。

扩展方案

除了使用sessionStorage，还可以考虑以下存储方案：

1. localStorage：持久化存储，关闭浏览器后仍然保留
2. IndexedDB：适合存储大量数据
3. 服务端存储：通过Ajax将状态保存到服务器

总结

通过本文介绍的方法，可以轻松实现Layui Tree组件节点展开状态的持久化，大大提升了用户在操作大型分类树时的体验。这种方案不仅适用于分类树，也可以应用于任何需要保持节点状态的树形结构展示场景。