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 数据结构和事件绑定
• 再使用异步加载大数据树

www.52runoob.com/archives/64…