zTree简易教程及源码（js， jQuery， html，树节点如何默认展开和收起）

本文主要是介绍zTree简易教程及源码（js， jQuery， html，树节点如何默认展开和收起），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.什么是zTree

zTree是jQuery的树状结构的一个插件，可以简单理解为在网页上帮助我们更好的去展示一些树状结构的数据。

2. 在HTML页面中如何使用zTree

2.1 需要注意的点：

【1】首先要引入相关资源，有时你选择的zTree和jquery版本不匹配可能导致页面上展示不出来，需要自己查找匹配的版本

【2】在一个div中通过ul无序列表展示ztree，注意这里的id一定要和后面的ztree 代码匹配才能展示出来！！！

<div style="margin-top: 20px;"><p>Test Case List: </p><ul id="treeDemo" class="ztree"></ul></div>

【3】zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
这个地方定义的id是treeDemo，前面的ul就是通过这个id去展示树状结构的！！！

2.2 源码示例

<!-- 首先要引入相关资源
有时你选择的zTree和jquery版本不匹配可能导致页面上展示不出来，需要自己查找匹配的版本 -->
<!-- CDN resource-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/zTree.v3/3.5.23/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/zTree.v3/3.5.23/js/jquery.ztree.all.js"></script>//在一个div中通过ul无序列表展示ztree，注意这里的id一定要和后面的ztree 代码匹配才能展示出来！！！