官方文档地址
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, //必须设置,表示使用ajax
type: "get", //测试时没搭后台,正式项目中应该设为post
url:"../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);
}
回调参数