js 实现jtree

实现 JTree 的 JavaScript 方法

在 JavaScript 中实现类似 JTree（树形结构展示）的功能，可以通过原生 JavaScript 或第三方库完成。以下是几种常见实现方式：

原生 JavaScript 实现

使用 HTML 和 CSS 结合 JavaScript 动态生成树形结构：

<div id="tree"></div>

const treeData = [
  {
    text: 'Parent 1',
    children: [
      { text: 'Child 1' },
      { 
        text: 'Child 2',
        children: [
          { text: 'Grandchild 1' }
        ]
      }
    ]
  }
];

function createTree(element, data) {
  const ul = document.createElement('ul');
  data.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.text;
    if (item.children) {
      createTree(li, item.children);
    }
    ul.appendChild(li);
  });
  element.appendChild(ul);
}

createTree(document.getElementById('tree'), treeData);

使用 jQuery 插件

jQuery 的 jstree 插件是常用解决方案：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<div id="jstree"></div>

$('#jstree').jstree({
  'core': {
    'data': [
      { 
        'text': 'Root',
        'children': [
          { 'text': 'Child 1' },
          { 'text': 'Child 2' }
        ]
      }
    ]
  }
});

使用 Vue/React 组件

Vue 示例（使用 vue-jstree）：

import VJstree from 'vue-jstree'

new Vue({
  components: { VJstree },
  data() {
    return {
      treeData: [
        {
          text: 'Node 1',
          children: [
            { text: 'Child 1' }
          ]
        }
      ]
    }
  }
})

React 示例（使用 react-jstree）：

import Tree from 'react-jstree'

function App() {
  const treeData = {
    core: {
      data: [
        { text: 'Root', children: [
          { text: 'Child' }
        ]}
      ]
    }
  };
  return <Tree data={treeData} />;
}

树形结构 CSS 样式

对于原生实现，需添加基础样式：

ul.tree, ul.tree ul {
  list-style: none;
  margin: 0;
  padding-left: 20px;
}
ul.tree li {
  position: relative;
}
ul.tree li:before {
  content: "";
  position: absolute;
  left: -15px;
  border-left: 1px solid #ccc;
  height: 100%;
}

交互功能增强

添加展开/折叠功能：

document.querySelectorAll('#tree li').forEach(li => {
  if (li.querySelector('ul')) {
    li.classList.add('collapsed');
    li.addEventListener('click', e => {
      e.stopPropagation();
      li.classList.toggle('collapsed');
    });
  }
});

配套 CSS：

li.collapsed > ul {
  display: none;
}
li:before {
  top: 0;
  width: 10px;
}

性能优化建议

对于大型树结构，建议：

• 实现懒加载（动态加载子节点）
• 使用虚拟滚动（如 react-window）
• 避免深层嵌套（超过5层建议分页）

以上方法可根据具体需求选择，第三方库通常提供更完整的 API（如节点选择、拖拽等功能）。