jquery 树形

jQuery 树形结构实现方法

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="tree"></div>
  <script>
    $('#tree').jstree({
      'core': {
        'data': [
          { "text": "Node 1", "children": [
            { "text": "Child 1" },
            { "text": "Child 2" }
          ]}
        ]
      }
    });
  </script>

• fancytree：另一个流行的树形插件，支持懒加载和多种主题。

  

  <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.0/skin-win8/ui.fancytree.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.38.0/jquery.fancytree-all.min.js"></script>
  <div id="tree"></div>
  <script>
    $("#tree").fancytree({
      source: [
        {title: "Node 1", folder: true, children: [
          {title: "Child 1"},
          {title: "Child 2"}
        ]}
      ]
    });
  </script>

手动实现简单树形结构 对于简单需求，可以不依赖插件：

<ul class="tree">
  <li>Parent
    <ul>
      <li>Child 1</li>
      <li>Child 2</li>
    </ul>
  </li>
</ul>
<style>
  .tree ul { display: none; }
  .tree li { cursor: pointer; }
</style>
<script>
  $('.tree li').click(function(e) {
    e.stopPropagation();
    $(this).children('ul').toggle();
  });
</script>

动态加载数据 通过 AJAX 动态加载树节点：

$('#tree').on('click', '.load-more', function() {
  var node = $(this).closest('li');
  $.get('/api/children', {parent: node.data('id')}, function(data) {
    node.append('<ul>' + data.map(item => 
      `<li data-id="${item.id}">${item.name}</li>`
    ).join('') + '</ul>');
  });
});

树形结构功能扩展

添加复选框

$('#tree').jstree({
  'plugins': ['checkbox'],
  'core': { 'data': [...] }
});

支持拖拽排序

$('#tree').jstree({
  'plugins': ['dnd'],
  'core': { 'data': [...] }
});

搜索功能

$('#search').keyup(function() {
  $('#tree').jstree('search', $(this).val());
});

性能优化建议

• 对于大型数据集，使用懒加载技术
• 避免频繁的 DOM 操作，使用文档片段批量插入
• 考虑使用虚拟滚动技术处理超长列表

以上方法可以根据具体需求选择适合的方案，插件方式适合复杂功能，手动实现适合简单场景。