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

最新推荐文章于 2024-07-28 08:45:45 发布

原创最新推荐文章于 2024-07-28 08:45:45 发布 · 1.8w 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery javascript ztree 前台框架 #JavaScript

本文介绍了zTree，一个jQuery的树形插件，用于展示树状结构数据。在HTML中使用zTree需注意资源匹配、设置对应id。控制节点默认状态有2种方式：通过open:true设定特定节点默认展开；使用expandAll(true)全局展开所有节点。

该文章已生成可运行项目，

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); //所有节点都会默认展开
    });