ztree使用

article/2025/9/14 4:10:43

官方文档地址

http://www.treejs.cn/v3/main.php#_zTreeInfo

各种参数

http://www.treejs.cn/v3/api.php

简单静态调用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link href="https://cdn.bootcss.com/zTree.v3/3.5.40/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.4.1/jquery.js"></script><script src="https://cdn.bootcss.com/zTree.v3/3.5.40/js/jquery.ztree.all.min.js"></script></head><body><ul id="treeDemo" class="ztree"></ul></body><script type="text/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>
</html>

效果图
在这里插入图片描述

动态加载

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link href="https://cdn.bootcss.com/zTree.v3/3.5.40/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.4.1/jquery.js"></script><script src="https://cdn.bootcss.com/zTree.v3/3.5.40/js/jquery.ztree.all.min.js"></script></head><body><ul id="treeDemo" class="ztree"></ul></body><script type="text/javascript">var zTreeObj;// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）var setting = {async: {enable: true, //必须设置，表示使用ajaxtype: "get",  //测试时没搭后台，正式项目中应该设为posturl:"../jsonSource/ztreeAjax.json", //请求url，返回List<Map>形的json数据autoParam:["id","name=n","level=lv"]//框架自动向后台传的参数。name=n相当于将name属性以n为id传到后台}};// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）var zNodes = [{name:"test1",open:false,isParent:true}//初始化数据];$(document).ready(function(){zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);});</script>
</html>

ztreeAjax.json文件内容

name属性为页面最终显示的字。
isParent决定该节点是否为子节点。
open决定当前节点是否展开，由于是异步加载，肯定都为false，直接用默认的就行。

其他属性为自定义属性，可以通过treeNode获取。

[{"name":"name1","isParent":"true","col1":"col1-1"},{"name":"name2","isParent":"false","col1":"col1-2"}
]

回调

套路都一样，只写一个示例，具体可以参考官方文档

   var setting = {async: {enable: true,type: "get",url:"../jsonSource/ztreeAjax.json",autoParam:["id","name=n","level=lv"]},callback: {onClick: onClickTree  //点击回调}};function onClickTree(event, treeId, treeNode, clickFlag){console.log(arguments);}