zTree树的简单应用

最新推荐文章于 2025-06-19 15:01:34 发布

I_M_ROOKIE

最新推荐文章于 2025-06-19 15:01:34 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/wang243144837/article/details/52692849

js 专栏收录该内容

1 篇文章

订阅专栏

zTree是一款基于jQuery的多功能树形插件，具备良好的性能和多种配置选项。本文介绍了zTree的基本使用方法，包括函数操作、设置结构以及节点数据属性。通过实例展示如何创建和配置zTree，为初学者提供实用的入门指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

zTree官网：www.treejs.cn/v3/main.php

zTree的API：http://www.treejs.cn/v3/api.php

由于刚使用没多久，并没有很深入的了解zTree，这里只记录一下我用到过一些的zTree属性：

废话不多说，来实际点的：

zTree的函数:

1. zTree的初始化： $.fn.zTree.init($("#treeId"), setting, zTreeNodes);

参数：（zTree容器的jQuery对象，zTree参数setting，zTree的初始化节点数据）

返回值：zTree对象

2.获取zTree对象： $.fn.zTree.getZTreeObj("treeId")

参数：（树ID）

返回值：zTree对象

3.销毁zTree： $.fn.zTree.destroy("treeId")

参数：（树ID），不写树ID表示销毁当前页面的所有zTree

没有返回值

简单zTree树使用方法（步骤）：

第一步：创建zTree容器：

<div class="zTreeDemoBackground left">
    <ul id="deptTree" class="ztree"></ul>
</div>

第二步：获取初始化数据zNodes；

第三步：设置setting参数；

第四步：初始化zTree树：

$.fn.zTree.init($("#"+_treeId), setting, _zNodes);

常用的setting结构（下面代码中带下划线的参数都是在setting前面就赋值好的）：

var setting = {
	    data: {
	        simpleData: {
	            enable: true,    //true表示可以接受简单形式的节点数据,即无序节点,上下级由id和父id控制
	            idKey: _itemId,    //id字段名
	            pIdKey: _itemPid    //父id字段名
	        },
	        key: {
	            name: _showField,    //树节点显示文本的字段
	            title: _title    //鼠标悬浮出现的提示信息字段
	        }
	    },
	    async: {
	        enable: _asyn,    //是否开启异步加载,true/false
	        dataType: "text",    //异步加载的返回类型,text可以满足大部分情况
	        url: jo.getChildUrl,    //查询子节点的url
	        autoParam: _autoParam,    //自动随url传到后台的参数数组(key=value形式),用于查询子节点,只需要指明传节点的哪个字段即可(["id","name"]),如果需要自定义key值,例如希望后台接收到的id值的key为ddid,可以这样写:["id=ddid","name"],这样传到后台的就是ddid=几,而不是id=几
	        dataFilter: jo.dealChildData    //数据过滤器,即在接收到子节点数据后,展示子节点前,对节点数据的处理
	    },
	    callback: {
	        onClick: _onClickFunc    //单击的回调函数
	    },
	    view: {
	        showLine: false    //是否显示虚线
	    },
	    check: {//需引入cxcheck扩展包
	    enable: true,    //勾选框开关
	    chkStyle: "checkbox",    //默认checkbox(与chkboxType属性关联),也可以写radio(与radioType属性关联)
	    chkboxType: {"Y":"p","N":"s"},    //Y和N固定不变,Y表示勾选,N表示取消勾选;Y和N的值为p或s或ps,p表示会影响父节点,s表示会影响子节点
	    radioType: "all"    //取值为"all"和"level",all表示在所有节点中单选,level表示在同一层级内单选  
	    }  
};

zTree节点数据属性:

checked：节点是否勾选，默认false

children：子节点数据，一般是一个json数组，无默认值

chkDisabled：节点勾选框是否禁用，默认false

icon：节点的图标url

iconClose：父节点折叠时的图标url

iconOpen：父节点展开时的图标url

iconSkin：节点自定义图标的css样式class名字

isHidden：节点是否被隐藏，控制节点显示/隐藏用hideNode()/showNode()等方法,多个用 hideNodes()/showNodes()

isParent：节点是否为父节点，true/false

nocheck：节点是否隐藏勾选框，true/false

open：节点是否展开，true/false

url：点击节点跳转的地址

target：新打开的地址的位置，默认为"_blank"，取值和a标签相同

由于时间关系，暂时分享到这里，欢迎大家一起谈论。