好的，阿杰，我帮你整理一份 ZTree 使用教程，从基础概念、安装引入、初始化配置，到常用功能示例，适合前端快速上手。

ZTree 使用教程（基础到实战）

1️⃣ ZTree 简介

  • ZTree：一款功能强大、轻量的 jQuery 树插件
  • 特点：
    • 支持多级树形结构
    • 支持异步加载节点（AJAX）
    • 支持复选框、单选框、节点操作（增删改）
    • 样式可定制，兼容性好

2️⃣ 引入 ZTree

2.1 下载

  • 官网下载：ZTree 官方下载
  • 常用文件：jquery.ztree.core.js jquery.ztree.excheck.js // 复选框支持 zTreeStyle.css

2.2 HTML 引入示例

<link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ztree.core.js"></script>
<script src="js/jquery.ztree.excheck.js"></script>

3️⃣ HTML 结构

<ul id="treeDemo" class="ztree"></ul>
  • <ul> 是树的容器
  • id="treeDemo" 对应初始化时的 setting

4️⃣ 初始化 ZTree

4.1 基本数据格式

var zNodes = [
    { id:1, pId:0, name:"父节点1", open:true },
    { id:11, pId:1, name:"子节点1" },
    { id:12, pId:1, name:"子节点2" }
];
  • 字段说明：
    • id：节点 ID
    • pId：父节点 ID
    • name：节点名称
    • open：是否默认展开

4.2 初始化树

var setting = {};
$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
  • 参数说明：
    • $("#treeDemo")：绑定容器
    • setting：配置选项
    • zNodes：节点数据

5️⃣ 常用功能配置

5.1 异步加载

var setting = {
    async: {
        enable: true,
        url: "/getTreeNodes",
        autoParam:["id"]
    }
};
  • 解释：
    • enable: true：开启异步加载
    • url：后台接口返回 JSON 数据
    • autoParam：自动传递父节点 ID

5.2 复选框功能

var setting = {
    check: {
        enable: true,   // 开启复选框
        chkboxType: { "Y": "ps", "N": "ps" } // 勾选/取消对子节点影响
    }
};
  • chkboxType：
    • "Y"：选中父节点时是否自动选中子节点
    • "N"：取消父节点时是否自动取消子节点

5.3 节点点击事件

var setting = {
    callback: {
        onClick: function(event, treeId, treeNode){
            alert("点击了：" + treeNode.name);
        }
    }
};
  • treeNode：当前点击的节点对象
  • 可用 treeNode.id, treeNode.pId, treeNode.name 等

5.4 增删改节点

var zTree = $.fn.zTree.getZTreeObj("treeDemo");

// 增加节点
var parentNode = zTree.getNodeByParam("id",1,null);
zTree.addNodes(parentNode, {id:13, pId:1, name:"新增子节点"});

// 删除节点
var node = zTree.getNodeByParam("id",12,null);
zTree.removeNode(node);

// 修改节点
node.name = "修改后的名称";
zTree.updateNode(node);

5.5 获取选中节点

var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes(true); // 返回选中的节点数组
nodes.forEach(function(n){
    console.log(n.id, n.name);
});
  • true：只返回被选中的节点
  • false：返回所有节点状态，包括未选中

6️⃣ 异步加载 JSON 数据示例

后台接口返回 JSON：

[
    {"id":1,"pId":0,"name":"父节点1","isParent":true},
    {"id":2,"pId":1,"name":"子节点1"}
]

前端配置：

var setting = {
    async: {
        enable: true,
        url: "/getTreeNodes",
        autoParam:["id"],
        dataType:"json"
    }
};
  • 节点可动态展开，支持大量数据

7️⃣ 小技巧

  1. 树节点数据量大时，优先使用 异步加载
  2. 节点 ID 唯一，否则会出现错误
  3. CSS 样式：可自定义 zTreeStyle.css，适配不同布局
  4. 扩展功能：
    • 拖拽：jquery.ztree.exedit.js
    • 多选框：jquery.ztree.excheck.js

8️⃣ 总结

  • ZTree 核心流程：
    1. 引入 JS/CSS 文件
    2. 准备 <ul> 容器
    3. 准备节点数据（静态或异步）
    4. 调用 $.fn.zTree.init() 初始化
    5. 根据需要绑定事件或操作节点
  • 常用功能：
    • 异步加载、复选框、节点操作、事件绑定

💡 建议：

  • 初学者先用静态 JSON 测试树
  • 掌握 map 数据结构和事件绑定
  • 再使用异步加载大数据树