摘要：1️⃣ ZTree 简介ZTree：一款功能强大、轻量的 jQuery 树插件特点：支持多级树形结构支持异步加载节点（AJAX）支持复选框、单选框、节点操作（增
1️⃣ ZTree 简介ZTree：一款功能强大、轻量的 jQuery 树插件特点：支持多级树形结构支持异步加载节点（AJAX）支持复选框、单选框、节点操作（增删改）样式可定制，兼容性好2️⃣ 引入 ZTree2.1 下载官网下载：ZTree 官方下载常用文件：jquery.ztree.core.js jquery.ztree.excheck.js // 复选框支持 zTreeStyle.css2.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>
- 是树的容器id="treeDemo" 对应初始化时的 setting4️⃣ 初始化 ZTree4.1 基本数据格式var zNodes = [
{ id:1, pId:0, name:"父节点1", open:true },
{ id:11, pId:1, name:"子节点1" },
{ id:12, pId:1, name:"子节点2" }
];
字段说明：id：节点 IDpId：父节点 IDname：节点名称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：自动传递父节点 ID5.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️⃣ 小技巧树节点数据量大时，优先使用 异步加载节点 ID 唯一，否则会出现错误CSS 样式：可自定义 zTreeStyle.css，适配不同布局扩展功能：拖拽：jquery.ztree.exedit.js多选框：jquery.ztree.excheck.js8️⃣ 总结ZTree 核心流程：引入 JS/CSS 文件准备
- 容器准备节点数据（静态或异步）调用 $.fn.zTree.init() 初始化根据需要绑定事件或操作节点常用功能：异步加载、复选框、节点操作、事件绑定💡 建议：
初学者先用静态 JSON 测试树掌握 map 数据结构和事件绑定再使用异步加载大数据树https://www.52runoob.com/archives/6415
