zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
特点：
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态 和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
在一个页面内可同时生成多个 Tree 实例
简单的参数配置实现 灵活多变的功能
二、使用
（1）引入ztree组件
注意：需要添加jquery依赖
<link href="https://www.jb51.net/static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" type="text/css" /> <script type="text/javascript" src="https://www.jb51.net/static/jquery/3.3.1/jquery-3.3.1.min.js"></script> <script src="https://www.jb51.net/static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>
（2）向body中添加div
<div> <div> </div> </div>
（3）添加ztree设置
<SCRIPT LANGUAGE="JavaScript"> var zTreeObj; // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解） var setting = {}; // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解） var zNodes = [{ name: "test1", open: true, children: [ { name: "test1_1" }, { name: "test1_2" } ] }, { name: "test2", open: true, children: [ { name: "test2_1" }, { name: "test2_2" } ] } ]; $(document).ready(function() { zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); zTreeObj.expandAll(true);//展开树 </SCRIPT>
（4）页面效果
（5）项目截图及html代码
html页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ztree测试页面</title> <link href="https://www.jb51.net/static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" type="text/css" /> <script type="text/javascript" src="https://www.jb51.net/static/jquery/3.3.1/jquery-3.3.1.min.js"></script> <script src="https://www.jb51.net/static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script> </head> <body> <div> <div> </div> </div> <SCRIPT LANGUAGE="JavaScript"> var zTreeObj; // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解） var setting = {}; // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解） var zNodes = [{ name: "test1", open: true, children: [ { name: "test1_1" }, { name: "test1_2" } ] }, { name: "test2", open: true, children: [ { name: "test2_1" }, { name: "test2_2" } ] } ]; $(document).ready(function() { zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </SCRIPT> </body> </html>
三、一些方法
（1）设置展开树
$(document).ready(function() { zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes); //展开所以节点 //zTreeObj.expandAll(true); //展开第一级数节点 var nodes = zTreeObj.getNodesByParam("level", 0); for(var i = 0; i < nodes.length; i++) { zTreeObj.expandNode(nodes[i], true, false, false); } });
四、setting 配置详解
一些比较常用的配置
（一）check
1、enable: true
设置 zTree 的节点上是否显示 checkbox / radio
默认值: false
（二）view
selectedMulti: false 设置是否允许同时选中多个节点。默认是true
（三）data
simpleData: { enable: true, idKey: 'id', pIdKey: 'pid', rootPId: '0' } var zNodes = [{ "id": 1, "pid": 0, "name": "test1" }, { "id": 11, "pid": 1, "name": "test11" }, { "id": 12, "pid": 1, "name": "test12" }, { "id": 111, "pid": 11, "name": "test111" } ];
效果：
