js 实现jtree

实现 JTree 的基本结构

使用 JavaScript 实现类似 JTree（树形结构）的功能，可以通过递归或迭代的方式构建 DOM 元素。以下是一个简单的实现示例：

class TreeNode {
  constructor(name, children = []) {
    this.name = name;
    this.children = children;
  }
}

function renderTree(node, parentElement) {
  const li = document.createElement('li');
  li.textContent = node.name;

  if (node.children.length > 0) {
    const ul = document.createElement('ul');
    node.children.forEach(child => renderTree(child, ul));
    li.appendChild(ul);
  }

  parentElement.appendChild(li);
}

// 示例数据
const treeData = new TreeNode('Root', [
  new TreeNode('Folder 1', [
    new TreeNode('File 1-1'),
    new TreeNode('File 1-2')
  ]),
  new TreeNode('Folder 2', [
    new TreeNode('File 2-1')
  ])
]);

// 渲染到页面
const treeContainer = document.createElement('ul');
renderTree(treeData, treeContainer);
document.body.appendChild(treeContainer);

添加交互功能

为树节点添加展开/折叠功能，可以通过 CSS 和事件监听实现：

function renderInteractiveTree(node, parentElement) {
  const li = document.createElement('li');
  const span = document.createElement('span');
  span.textContent = node.name;
  span.style.cursor = 'pointer';

  li.appendChild(span);

  if (node.children.length > 0) {
    const ul = document.createElement('ul');
    ul.style.display = 'none'; // 默认折叠
    node.children.forEach(child => renderInteractiveTree(child, ul));

    span.addEventListener('click', () => {
      ul.style.display = ul.style.display === 'none' ? 'block' : 'none';
    });

    li.appendChild(ul);
  }

  parentElement.appendChild(li);
}

// 渲染交互式树
const interactiveTreeContainer = document.createElement('ul');
renderInteractiveTree(treeData, interactiveTreeContainer);
document.body.appendChild(interactiveTreeContainer);

使用第三方库

如果需要更复杂的功能（如拖拽、动态加载），可以选用现成的库：

• jsTree：基于 jQuery 的树形插件，支持多种交互和主题。

  // 引入 jsTree 后初始化
  $('#treeContainer').jstree({
    'core': {
      'data': [
        { 'text': 'Root', 'children': [
          { 'text': 'Folder 1' },
          { 'text': 'Folder 2' }
        ]}
      ]
    }
  });

• FancyTree：功能丰富的树形组件，支持懒加载和复选框。

  

动态加载数据

通过异步请求加载子节点数据，优化性能：

async function loadChildren(parentNode, parentElement) {
  const response = await fetch(`/api/tree?parent=${parentNode.name}`);
  const children = await response.json();

  parentNode.children = children.map(child => new TreeNode(child.name));
  renderTree(parentNode, parentElement);
}

样式优化

通过 CSS 美化树形结构：

ul {
  list-style-type: none;
  padding-left: 20px;
}
li span:hover {
  background-color: #f0f0f0;
}