js 实现ztree
实现 ZTree 的基本步骤
安装或引入 ZTree 库
ZTree 是一个基于 jQuery 的树形插件，需要先引入 jQuery 和 ZTree 的相关文件。可以通过 CDN 或本地文件引入：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.48/css/zTreeStyle/zTreeStyle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zTree.v3/3.5.48/js/jquery.ztree.all.min.js"></script>准备 HTML 结构
创建一个容器用于渲染树形结构：
<div>
<ul id="treeDemo" class="ztree"></ul>
</div>配置 ZTree 参数
定义 ZTree 的配置对象，设置树的基本行为和样式：
var setting = {
view: {
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};准备树节点数据
定义树节点的数据，通常是一个包含 id、pId（父节点 ID）和 name 的数组：
var zNodes = [
{ id: 1, pId: 0, name: "父节点 1" },
{ id: 11, pId: 1, name: "子节点 1-1" },
{ id: 12, pId: 1, name: "子节点 1-2" },
{ id: 2, pId: 0, name: "父节点 2" },
{ id: 21, pId: 2, name: "子节点 2-1" }
];初始化 ZTree
调用 $.fn.zTree.init 方法初始化树形结构：
$(document).ready(function() {
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});自定义功能扩展
可以通过配置对象添加回调函数实现自定义功能，例如节点点击事件：
var setting = {
callback: {
onClick: function(event, treeId, treeNode) {
console.log("点击节点:", treeNode.name);
}
}
};动态加载节点
通过异步请求动态加载子节点数据：
var setting = {
async: {
enable: true,
url: "/api/getNodes",
autoParam: ["id"]
}
};常用 API 示例
获取选中的节点：
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getSelectedNodes();展开或折叠节点：
treeObj.expandNode(nodes[0], true, false); // 展开节点
treeObj.expandNode(nodes[0], false, false); // 折叠节点注意事项
- 确保 jQuery 版本与 ZTree 兼容，推荐使用 jQuery 1.4.3+ 或 2.0+。
- 节点数据中的
id和pId必须唯一且正确对应，否则会导致渲染异常。 - 如果需要复杂功能（如拖拽、复选框等），需在配置中启用相应选项。
