zTree 实例

于 2019-01-18 01:12:27 发布
阅读量474 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LaOngDaoxing/article/details/86533430
版权

从网上下载的zTree_v3-master.zip       ————zTree 是一个依靠 jQuery 实现的多功能 “树插件”。

ztree_v3_eg1.html

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面url为http://localhost:8081/zTree_Demo/view/general_jsp/zTree_v3/ztree_v3_eg1.html</title>
        <link rel="stylesheet" type="text/css" href="/static/plugins_jsUtil/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>
    </head>
    <body>
        <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
        
        <script type="text/javascript" src="../../../static/plugins_jsUtil/zTree_v3/js/jquery-1.4.4.min.js"></script>
   	    <script type="text/javascript" src="../../../static/plugins_jsUtil/zTree_v3/js/jquery.ztree.all.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
        	/* 1_方式1 利用zTree,形成树形。        ————zTree 是一个依靠 jQuery 实现的多功能 “树插件”。   ---------------------------------------- */ 
			// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）  
            var setting = {
                view: {
                    dblClickExpand: false,
                    showLine: true,
                    selectedMulti: false
                },
                data: {
                    simpleData: {
                        enable:true,
                        idKey: "id",
                        pIdKey: "pId",
                        rootPId: ""
                    }
                },
                callback: {
                    beforeClick: function(treeId, treeNode) {
                        var zTree = $.fn.zTree.getZTreeObj("tree");
                        if (treeNode.isParent) {
                            zTree.expandNode(treeNode);
                            return false;
                        } else {
                            return true;
                        }
                    }
                }
            };
            // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
            var zNodes =[
                {id:1, pId:0, name:"水果", open:true},
                {id:101, pId:1, name:"苹果"},
                {id:102, pId:1, name:"香蕉"},
                {id:103, pId:1, name:"梨"},
                {id:10101, pId:101, name:"红富士苹果"},
                {id:10102, pId:101, name:"红星苹果"},            
                {id:10103, pId:101, name:"嘎拉"},
                {id:10104, pId:101, name:"桑萨"},
                {id:10201, pId:102, name:"千层蕉"},
                {id:10202, pId:102, name:"仙人蕉"},
                {id:10203, pId:102, name:"吕宋蕉"},
            ];       
            var t = $("#tree");
            /**
             * zTree 初始化方法：$.fn.zTree.init(t, setting, zNodes)
             * t:用于展现 zTree 的 DOM 容器
             * setting:zTree 的配置数据
             * zNodes:zTree 的节点数据
             * 
             */  
            t = $.fn.zTree.init(t, setting, zNodes);
            });
        </script>
    </body>
</html>


<!-- 参考
ZTREE入门-最简单的树 https://www.cnblogs.com/zuidongfeng/p/5537091.html -->

ztree_v3_eg2.html

<!DOCTYPE html>
<html>
  <head>   
    <title>页面url为http://localhost:8081/zTree_Demo/view/general_jsp/zTree_v3/ztree_v3_eg2.html</title>
	<link rel="stylesheet" type="text/css" href="/static/plugins_jsUtil/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>   
  </head>
  <body>
	<div>  
	   <ul id="treeDemo" class="ztree"></ul>  
	</div>  static/plugins_jsUtil/zTree_v3/js
	<script type="text/javascript" src="../../../static/plugins_jsUtil/zTree_v3/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../../static/plugins_jsUtil/zTree_v3/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="../../../static/plugins_jsUtil/zTree_v3/js/jquery.ztree.core.js"></script>   
    <script type="text/javascript" src="../../../static/plugins_jsUtil/zTree_v3/js/jquery.ztree.excheck.js"></script>    
	<script type="text/javascript"> 
	$(document).ready(function(){ 
		/* 1_方式2 利用zTree,形成树形。        ————zTree 是一个依靠 jQuery 实现的多功能 “树插件”。 ---------------------------------------- */ 
    	//js方法  
		function test(event, treeId, treeNode){  
		     alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);  
		}   
  		// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）  
  		var setting = {  
			check:{  
			    enable: true,  			   
			},  
			callback:{  
			    onCheck:test  
			}  
  		};  
		// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）  
		var zNodes = [  
		{
			name:"test1", 
			open:true,
			"checked":"true", 
			children:[  
		    {
			    name:"test1_1",
			    "checked":"true"
		    }, {
		   	 	name:"test1_2"
		    }]
		 }, {
			name:"test2",
			open:true, 
			children:[{
				name:"test2_1"
			},{
			 	name:"test2_2"
			}]
		 }];  
	    //页面加载成功后,开始加载树形结构  
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);  
	});  
 </SCRIPT>  
  </body>
</html>

<!-- 参考
实例来源  jquery树形插件zTree使用示例--入门 https://blog.youkuaiyun.com/yaoyy09/article/details/53186536 -->

ztree_v3_eg_test.html

<!DOCTYPE html>
<html>
  <head>
    <title>页面url为http://localhost:8081/zTree_Demo/view/general_jsp/zTree_v3/ztree_v3_eg_test.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
	<link rel="stylesheet" type="text/css" href="/static/plugins_jsUtil/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>    
  </head>
  <body>
	<div>  
		<p>1_方式1.1</p>
	    <ul id="treeDemo1" class="ztree" ></ul>  
	  	<p>1_方式1.2</p>
	    <ul id="treeDemo2" class="ztree"></ul>  
	    <p>1_方式2</p>
	    <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
	</div> 
	<script type="text/javascript" src="../../../static/plugins_jsUtil/zTree_v3/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../../../static/plugins_jsUtil/zTree_v3/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="../../../static/plugins_jsUtil/zTree_v3/js/jquery.ztree.core.js"></script>   
    <script type="text/javascript" src="../../../static/plugins_jsUtil/zTree_v3/js/jquery.ztree.excheck.js"></script>  
	<script type="text/javascript">
	  	$(document).ready(function(){ 
			/* 1_方式1.1 利用zTree,形成树形。        ————zTree 是一个依靠 jQuery 实现的多功能 “树插件”。   ---------------------------------------- */ 
			// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）  
			var setting = {
				check: {
					enable: true
				},
				data: {
					simpleData: {
						enable: true
					}
				}
			}
			// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）	
			var zNodes =[
				{ id:1, pId:0, name:"随意勾选 1", open:true},
				{ id:11, pId:1, name:"随意勾选 1-1", open:true},
				{ id:111, pId:11, name:"随意勾选 1-1-1"},
				{ id:112, pId:11, name:"随意勾选 1-1-2"},
				{ id:12, pId:1, name:"随意勾选 1-2", open:true},
				{ id:121, pId:12, name:"随意勾选 1-2-1"},
				{ id:122, pId:12, name:"随意勾选 1-2-2"},
				{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
				{ id:21, pId:2, name:"随意勾选 2-1"},
				{ id:22, pId:2, name:"随意勾选 2-2", open:true},
				{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
				{ id:222, pId:22, name:"随意勾选 2-2-2"},
				{ id:23, pId:2, name:"随意勾选 2-3"}
			];	
			$.fn.zTree.init($("#treeDemo1"), setting, zNodes);
			
			/* 1_方式1.2 利用zTree,形成树形。        ————zTree 是一个依靠 jQuery 实现的多功能 “树插件”。   ---------------------------------------- */ 
			// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）  
			var setting = {
                view: {
                    dblClickExpand: false,
                    showLine: true,
                    selectedMulti: false
                },
                data: {
                    simpleData: {
                        enable:true,
                        idKey: "id",
                        pIdKey: "pId",
                        rootPId: ""
                    }
                },
                callback: {
                    beforeClick: function(treeId, treeNode) {
                        var zTree = $.fn.zTree.getZTreeObj("tree");
                        if (treeNode.isParent) {
                            zTree.expandNode(treeNode);
                            return false;
                        } else {
                            return true;
                        }
                    }
                }
            };
            // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）	
            var zNodes =[
                {id:1, pId:0, name:"互联网", open:true},
                {id:101, pId:1, name:"灾害类型"},
                {id:102, pId:1, name:"发生时间"},            
                {id:103, pId:1, name:"经度"},
                {id:104, pId:1, name:"纬度"},
                {id:2, pId:0, name:"微博", open:true},
                {id:201, pId:2, name:"灾害类型"},
                {id:202, pId:2, name:"发生时间"},
                {id:203, pId:2, name:"经度"},
                {id:204, pId:2, name:"纬度"},
                {id:3, pId:0, name:"墨迹天气"},
                {id:4, pId:0, name:"录入信息"},           
            ];
            var t = $("#tree");          
            /**
             * zTree 初始化方法：$.fn.zTree.init(t, setting, zNodes)
             * t:用于展现 zTree 的 DOM 容器
             * setting:zTree 的配置数据
             * zNodes:zTree 的节点数据
             * 
             */
            t = $.fn.zTree.init(t, setting, zNodes);
         	
			/* 1_方式2 利用zTree,形成树形。        ————zTree 是一个依靠 jQuery 实现的多功能 “树插件”。 ---------------------------------------- */ 
		   	//js方法  
			function test(event, treeId, treeNode){  
		     	alert(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);  
			}  
		  	// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）  
		  	var setting = { 		  	 
				check:{  
				    enable: true,  
				},  
				callback:{  
				    onCheck:test  
				} , 				
		  	};  
		  	// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
		  	var zNodes = [
		  		{
				  	name:"互联网", 
				  	open:true,
				  	checked:true, 
			  		children: [{
			  			name:"灾害类型",
			  			"checked":"true"	  			
			  		}, {
			  			name:"发生时间"
			  		}, {
			  			name:"经度"
			  		}, {
			  			name:"纬度"
			  		}]
			  	},  
			  	{
			  		name:"微博", 
				  	open:true,
				  	"checked":"true", 
			  		children: [{
			  			name:"灾害类型",
			  			"checked":"true"	  			
			  		}, {
			  			name:"发生时间"
			  		}, {
			  			name:"经度"
			  		}, {
			  			name:"纬度"
			  		}]
			  	},
			  	{
			  		name:"墨迹天气", 
				  	open:true,	
			  	},
			  	{
			  		name:"录入信息", 
				  	open:true,	
			  	}
			 ]; 
		    //页面加载成功后,开始加载树形结构  
			$.fn.zTree.init($("#treeDemo2"), setting, zNodes);  
	  	});  
	</script>  
  </body>
</html>
LaOngDaoxing
关注
js树形控件—zTree使用总结
Roc的博客
04-17 1251
树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree v3.3 API 文档从zTree官网下载的zTree包括以下组成部分metroStyle文件夹：zTree的metro风格样式相关文件（图片及css样式表）。zTreeStyle文件夹：zTree的标准风格样式文件夹（图片及css样式表）是完整的js库，可单纯加载此文件实现所有zTree功能，ztree.core。
一个简单的ztree小例子
06-03
一个简单的ztree小例子 代码简洁 适合初学者
ztree实例
Hello World!
07-15 8146
转自：http://blog.youkuaiyun.com/duck_arrow/article/details/7091861   zTree【简介】 zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Aj
Ztree完整实例
01-18
ztree,ztree教程,ztree实例,ztree源码，完整实例附带jar包
ztree使用实例
duansamve的博客
10-03 2315
一、当某节点被选择或被取消选择时获取所有被选择的节点： <link rel="stylesheet" href="./static/libs/ztree/css/metroStyle/metroStyle.css" type="text/css"><!-- ztree --> <script src="./static/libs/ztree/js/jquery.z...
新建文件夹_ztree实例_双边拍卖_最后通牒_
10-03
这个“新建文件夹_ztree实例_双边拍卖_最后通牒_”的压缩包可能包含了一些使用ZTree实现特定功能的示例代码，如双边拍卖和最后通牒机制的模拟。下面我们将详细探讨这些概念以及它们与ZTree的结合应用。 1. **ZTree*...
SSH 做的ztree实例
02-07
在这个"SSH做的ztree实例"中，可能包含了一个使用SSH框架开发的Web应用，该应用集成并使用了ZTree来呈现某种树状数据结构，比如文件系统或组织架构。不过，由于描述提到"有些功能还不完善"，这意味着这个实例可能还...
jfinal ztree实例
10-19
**JFinal ZTree 实例详解** JFinal 是一个基于 Java 的轻量级 Web 开发框架，它以 MVC（Model-View-Controller）架构为基础，旨在提高开发效率，降低开发成本。ZTree 是一款广泛使用的 JavaScript 树状菜单插件，...
zTree实例开发：多种页面实现技巧
为了开发一个zTree实例，我们需要掌握以下几个关键知识点： 1. zTree的基本概念 - zTree的结构组成：节点（Node）是树的基础单元，每个节点可以拥有子节点，从而形成树状结构。 - zTree的版本：zTree有多个版本，...
(附数据库脚本)jQuery Ztree实例
09-08
通过解压并运行这个项目，你可以看到一个完整的jQuery Ztree实例，它展示了如何从数据库动态加载数据、显示树结构以及响应节点点击事件。 总的来说，jQuery Ztree 结合数据库脚本，为开发者提供了一种灵活且功能...
ztree小例子
03-22
使用最新的jquery.ztree-2.6.js实现ztree小例子，可以下载使用
ztree 开发实例
10-25
(附数据库脚本)jQuery Ztree实例 已实现从数据库读取数据 已实现树节点的展示 已实现点击事件
ztree使用完整示例
05-17
超完整的ztree使用demo
ztree简单实例
fa_fa_的博客
12-19 410
这是第一次写自己的博客，主要是想记录一下自己平时用到的东西 &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %&gt; &lt;%@ taglib uri="/WEB-INF/tlds/function.tld" prefix="fun" %&gt; &lt;%@ taglib uri=&quo
zTree应用实例详讲(4)
lvjianyu2007的专栏
06-23 1551
这一节，主要是讲用右击弹出菜单，实现重命名,删除，新建文件夹，且根节点，不能删除和重命名。 好，现在开始工作： 　　首先，第一步：我们要在页面上去新建一个div作为我们弹出的菜单，把这个div一开始设为display:none。因为要根据是否为根节点来判断是否有可以重命名和删除，所以我们最好用动态来控制弹出的样式。 　　在aspx中的任意位置加入以下div:  
Z-tree实例（一）——简单实例
总有一天，你的日积月累，会成为别人的望尘莫及
05-07 569
最近弄的项目中有用到z-tree就趁机研究一下，都是一些官方的小例子，这里记录一下，以后用的时候可以直接用。 1、标准模式：基本页面和引入的文件与官网demo相同： &lt;!DOCTYPE html&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;z-tree实例，标准模式&lt;/TITLE&gt; &lt;meta http-equiv=...
Jquery zTree实例
热门推荐
duck_arrow的专栏
12-21 5万+
zTree【简介】 zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动、编辑、删除 支持任意更换皮肤 / 个性化图标（依靠css） 支...
zTree学习小例子
qq_21875331的博客
03-19 1273
项目结构效果展示：一、数据库设计CREATE TABLE `menu` (  `id` INT(11) NOT NULL AUTO_INCREMENT,  `pid` INT(11) DEFAULT NULL,  `title` VARCHAR(50) NOT NULL,  `url` VARCHAR(50) DEFAULT NULL,  PRIMARY KEY (`id`)) ENGINE=IN...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值