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 代码匹配才能展示出来！！！
<div style="margin-top: 20px;">
	<p>Test Case List: </p>
	 <ul id="treeDemo" class="ztree"></ul>
 </div>
 
 //接下来是zTree的javascript代码
 <script type="text/javascript">
            var zTreeObj;
            // zTree configuration information, refer to API documentation (setting details)
            var setting = {
    
    
                check: {
    
    
                    enable: true,   
                    chkStyle: 'checkbox'
                }
            };
            // zTree data attributes, refer to the API documentation (treeNode data details)
            var zNodes = [
                {
    
    name:"Project1", open:true, children: [
                        {
    
    name:"ModuleAAA", open: true, children: [
                            {
    
    name:"testCaseAAA"}
                        ]}, 
                        {
    
    name:"ModuleBBB", open: true, children: [
                            {
    
    name:"testCaseBBB"}
                        ]}
                    ]},
                
                {
    
    name:"Project2", open:true, children:[
                    {
    
    name:"Module001"}, {
    
    name:"Module002"}]}
            ];
            $(document).ready(function(){
    
    
                zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
                //这个地方定义的id是treeDemo，前面的ul就是通过这个id去展示树状结构的！！！
            });
            </script>

3. 效果图展示

4. 如何控制zTree节点的默认展开或收起

4.1 方法一. 通过open:true控制具体节点的默认展开

如果不写open:true则默认此节点是收起状态

var zNodes = [
   {
    
    name:"Project2", open:true, children:[
            {
    
    name:"Module001"}, {
    
    name:"Module002"}]}     
];

4.2 方法二. 通过expandAll(true)方法全局开启默认展开

    $(document).ready(function(){
    
    
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        zTreeObj.expandAll(true); //所有节点都会默认展开
    });