jQuery Treeview

Treeview（树形视图）把层级数据展示为可展开/折叠的树，常用于文件管理、分类目录、组织架构。核心交互是"点击文件夹节点、切换其子列表的显隐"。本节从零实现该逻辑，并封装成支持选项的 $.fn.treeview 插件，方便复用。

1. 树的 HTML 结构

用嵌套列表表达层级：li 内含标题与子 ul，folder 标记可展开的节点：

<style>
ul.tree, ul.tree ul { list-style: none; padding-left: 18px; }
ul.tree .folder { cursor: pointer; color: #06c; }
</style>
<ul class="tree" id="tree">
  <li><span class="folder">文档</span>
    <ul>
      <li><span class="folder">教程</span>
        <ul>
          <li>jQuery 教程</li>
          <li>HTML 教程</li>
        </ul>
      </li>
      <li>图片</li>
    </ul>
  </li>
  <li>关于我们</li>
</ul>

2. 展开与折叠逻辑

用事件委托绑定：点 folder 时切换其下子 ul 的显隐：

$("#tree").on("click", "span.folder", function () {
  $(this).toggleClass("active")
         .parent().children("ul").stop().slideToggle(200);
});
// 效果：点"文档"展开其下的"教程、图片"；点"教程"再展开一层；
// 再点一次已展开的节点，对应子层即收起

3. 封装成 $.fn.treeview 插件

把委托逻辑做成插件，collapsed 选项决定初始状态（标准写法：$.extend 合并选项、return this 支持链式调用）：

$.fn.treeview = function (options) {
  options = $.extend({ collapsed: true }, options);
  if (options.collapsed) { this.find("ul").hide(); }   // 初始全部收起
  this.on("click", "span.folder", function () {
    $(this).toggleClass("active")
           .parent().children("ul").stop().slideToggle(200);
  });
  return this;
};
$("#tree").treeview({ collapsed: false });
// 效果：#tree 初始展开第一层（collapsed:false），点击节点仍可逐层收起/展开

4. 数据驱动的动态树

树常由 AJAX 数据生成：递归拼 HTML 后调用 treeview，有 children 的节点渲染成 folder：

var data = [
  { name: "前端", children: [{ name: "jQuery" }, { name: "Vue" }] },
  { name: "后端" }
];
function build(items) {
  return "<ul>" + items.map(function (it) {
    var child = it.children ? build(it.children) : "";
    var cls = child ? " class='folder'" : "";
    return "<li><span" + cls + ">" + it.name + "</span>" + child + "</li>";
  }).join("") + "</ul>";
}
$("#tree2").html(build(data)).treeview();
// 效果：根据 data 自动生成两级树，含子节点的项可展开/折叠

5. 应用与性能提示

• 事件委托绑定在容器上，动态添加的节点无需重新绑定；
• 节点多时给 li 加 data-id，点击时读取 id 配合 Ajax 懒加载下一层，避免一次性渲染整棵树；
• 功能复杂（拖拽、多选、懒加载）可选用 zTree、jstree 等成熟插件，思路与本例一致。

小结

Treeview 的本质是"点击文件夹、slideToggle 其子列表"；封装成支持 collapsed 选项的 $.fn.treeview 后即可复用于任意树数据，层级深、节点多时优先事件委托与 Ajax 懒加载。