ztree使用

最新推荐文章于 2022-03-06 22:27:09 发布

nayi_224

最新推荐文章于 2022-03-06 22:27:09 发布

阅读量377

点赞数

分类专栏： jQuery 文章标签： ztree

本文链接：https://blog.csdn.net/nayi_224/article/details/89002816

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

官方文档地址

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

回调参数
在这里插入图片描述

nayi_224

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ztree使用

官方文档地址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...
复制链接

扫一扫

专栏目录