正文 

当前位置： 首页 > IT > java教程

ztree的重点

hzhjxx hzhjxx     2023-01-07     398

关键词：

今天学习了zTree插件，记录一下使用步骤：

 

1 下载，把下载好的目录整个放在项目中

文件夹目录：

js：一般引这jquery.ztree.all.js和jquery.ztree.core.js

css:：用zTreeStyle里面的zTreeStyle.css

demo：示例：可以右键--查看框架信息，可以看到网址，再打开相应的文件，查看代码

api：帮助文档

 

2

1）引入css，引入jquery，引入zTree.js

2）加一个结构代码

<div id="treeDemo" class="ztree"></div>，注意id和class必须有。

3）然后从demo中把js拷贝下来

4）主要修改setting配置 和 Znodes 数据

 

3 一般使用“简单json”这种数据格式，

数据是从是数据库中得到的，是一个二维数组，

可以用for循环把数据添加到ztree的数据节点中（代码在最后）

其他可以查看api中的“treeNode 节点数据详解”

 

5 setting 配置详解

回调函数举例：

onclick，有三个参数比较重要：

技术分享图片

 

总体示例：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>z-tree</title>
		<link rel="stylesheet" href="../../lib/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
		<script src="../../lib/jquery-3.2.1.min.js"></script>
		<script src="../../lib/zTree_v3/js/jquery.ztree.all.js"></script>

		<script>		
		var setting = 
			data: 
				simpleData: 
					enable: true
				
			,
			callback:  //回调函数
				onClick: zTreeOnClick
			
		;
		
		//点击时弹出id和名称
		function zTreeOnClick(event, treeId, treeNode)
			console.log(treeNode.id+treeNode.name);
		
		
		//原始数据
		var arr=[
			[1,‘山东‘,0],
			[2,‘辽宁‘,0],
			[3,‘江苏‘,0],
			[11,‘淄博‘,1],
			[21,‘大连‘,2],
			[31,‘南京‘,3],
			[111,‘张店‘,11],
		];
		
		//z-tree数据
		var zNodes=[];
		
		//把原始数据放入z-tree数据中（是一个json）
		for(var i=0; i<arr.length; i++)
			zNodes.push(
				id:arr[i][0],
				name:arr[i][1],
				pId:arr[i][2]
			)
		

		$(document).ready(function()
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		);		
	</script>
	</head>

	<body>
		<div id="treeDemo" class="ztree"></div>
	</body>

</html>

效果：

技术分享图片

可以在控制台查看点击时的效果

 

总结：ztree的使用还比较简单，api不大容易看，直接看demo示例就可以，遇到相应功能，直接拷贝就行。插件这种东西还是重在理解，不需要在意写法，都是规定好的，就是拿过来直接用。所以，还是要实际项目中，有机会用一遍，才能发现问题。 

输入框点击下滑ztree菜单(代码片段)

...输入框加监听，click方法，然后将ztree的div显示，这里的重点应该是怎么设计这个ztree使其能够显示在输入框的下面显示。这部分的代码也是在网上找到的。实现步骤：①：输入框和ztree的div代码<divclass="layui-in 查看详情

ztree树的使用

...字，发现只能输入英文。。扯远了，当然这个可以不做。重点是搜索方法。其实获取到含有搜索关键字的所有节点很简单，ztree已经封装好了，就是getNodesByParamFuzzy()。但是，想要的效果是，执行下一次搜索时，要把上一次搜索展... 查看详情

ztree

1、ztree　API网址：http://www.treejs.cn/v3/api.php2、ztree的基本介绍　　zTree是一个依靠jQuery实现的多功能插件树。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。专门适合项目开发，尤其是树状菜单、树状数据的Web显示、... 查看详情

ztree简单使用

zTree使用　　zTreegithub地址　　zTreeAPI文档　　zTree插件依赖JQ所以使用zTree首先引入JQ，另外zTree的点击功能，编辑功能都是单独的文件，如需使用也要引入(也可以引入全部功能的JS文件)。　　引入zTree的css文件(zTreeStyle.css和demo.css... 查看详情

使用ztree插件构建树形菜单

zTree下载：https://github.com/zTree/zTree_v3目录：就我看来，zTree较为实用的有以下几点：zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。支持JSON数据支持静态和Ajax异步... 查看详情

ztree优秀的jquery树插件

zTree优秀的jquery树插件,文档详细，渲染快使用方法：1、引用zTree的js和css文件　　<linkhref="~/Content/zTree_v3/css/zTreeStyle/zTreeStyle.css"rel="stylesheet"/><scriptsrc="~/Content/zTree_v3/js/jquery.ztree.core.min.js"> 查看详情

ztree通过指定id找到节点并选中

zTree=$.fn.zTree.getZTreeObj("treeDemo");//treeDemo界面中加载ztree的divvarnode=zTree.getNodeByParam("id",pid);zTree.cancelSelectedNode();//先取消所有的选中状态zTree.selectNode(node,true);//将指定ID的节点选中zTree.expandNode( 查看详情

制作一棵ztree

...在做web项目时，常会用到一些树形菜单。在此，我们利用ztree实现树形菜单的效果。zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree的最大优点。　　接下来，我演示一棵简单的ztr... 查看详情

ztreejquery-ztree的基本使用

1.zTree的下载地址　　https://gitee.com/zTree/zTree_v3　　API文档：http://www.treejs.cn/v3/api.php2.引入需要的文件　　<scripttype="text/javascript"src="../libs/ztree/jquery.ztree.core.js"></script>　　<scriptt 查看详情

ztree第五章，ztree的nodes数据例子

varnodes1=[name:"小学",iconOpen:folderOpen,iconClose:folder,chkDisabled:true,children:[name:"语文",iconOpen:folderOpen,iconClose:folder,children:[name:"人教版",iconOpen:folderOpen,iconClose:folder,childre 查看详情

vue-ztree

在vue中引入zTree，和引入其他组件类似，首先在main.js里将以下3个js引入： import"./js/jquery-3.3.1.min.js";import"../plugins/zTree/js/jquery.ztree.core.min.js";import"../plugins/zTree/js/jquery.ztree.excheck.min.js";这三个js分别是：jQuery，建议从官方网站下... 查看详情

ztree的使用

zTree可以实现树形结构的关系。一般会出现在部门的上下级关系，角色权限的分配等模块中...zTree格式要求：即Json的复杂格式　　[{id:"..",pId:"..",name:"..",checked:"true/false"}]id：标识当前的id；pId：父节点的id；name：节点名称（就是在... 查看详情

ztree学习笔记

  在项目当中，经常会用到ztree树形插件，之前做的几个项目当中都用到了这个插件，感觉功能还是很强大的，而且在网上还找到了中文的API，因为项目中的树形结构不是自己做的，所以现在从头学习一下，并且记录一下... 查看详情

ztree使用教程

...天项目需要写一个树形帮助，学习了我们项目组的老师的Ztree的树的写法，实现了这个帮助，下面来总结一下Ztree的用法。（也是参考的一篇csdn上的博客了）zTree是一个依靠jQuery实现的多功能“树插件”。被广泛应用在系统... 查看详情

ztree的拖拽排序

ztree本身是可以支持拖拽的，但是却没有找到明确的支持拖拽的排序，也就是说，在拖拽过程中，需要自定义维护拖拽后的顺序并保存至后台。在这样一个比较常规的需求情况下，网上也有朋友给出了一些解决方案，比如自定义... 查看详情

ztree的简单使用和后台交互的写法

一、引入ztree的头文件<!--引入ztree/--> <scripttype="text/javascript"src="${pageContext.request.contextPath}/lib/ztree/js/jquery-1.8.3.min.js"></script> <scripttype="text/javascript"src="$ 查看详情

树形菜单解决方案推荐

zTree介绍zTree是一个依靠jQuery实现的多功能“树插件”。优异的性能、灵活的配置、多种功能的组合是zTree最大优点。专门适合项目开发，尤其是树状菜单、树状数据的Web显示、权限管理等等。zTree是开源免费的软件（MIT许可证）... 查看详情

笔记ztree的使用

引用的js和css：<!--zTreeJS--><scripttype="text/javascript"src="jquery/jquery-1.7.min.js"></script><scripttype="text/javascript"src="zTree/js/jquery.ztree.core-3.2.js"></script> 查看详情