您的位置: 首页  >  文章  >  ztree使用

ztree使用

分类: 文章 • 2024-11-01 15:31:22

官方文档地址

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>

效果图
ztree使用

动态加载

<!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);
   }

回调参数
ztree使用

相关推荐