关于zTree在项目中的应用

最新推荐文章于 2024-04-26 15:21:07 发布
最新推荐文章于 2024-04-26 15:21:07 发布
阅读量982 收藏 2
点赞数
分类专栏： zTree 文章标签： zTree 禁用 不同树 复杂网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28306215/article/details/82691053
版权

最近，在项目中需要用树形菜单，所以就研究了一波zTree的使用，不得不说Z树是真的强大，自己也学到了很多。小生就此来分享一下心得，请大神们多多指教：

1）使用 zTree 实现不同树之间的拖动

    这个应该是很简单的了，直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>jQuery EasyUI Tree</title>
	<link rel="stylesheet" type="text/css" href="css/zTreeStyle.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="js/themes/icon.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>
	<style type="text/css">
	</style>
	<script type="text/javascript">
		var mainSetting = {
			edit: {
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false,
				drag: {
					autoExpandTrigger: false,
					isCopy: true,
					isMove: true,
					prev: false,
					next: true,
					inner: false
				}
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop
			}
		};
		var objSetting = {
				edit: {
					enable: true,
					showRemoveBtn: false,
					showRenameBtn: false,
					drag: {
						autoExpandTrigger: false,
						isCopy: true,
						isMove: false,
						prev: false,
						next: false,
						inner: false
					}
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					beforeDrag: beforeDrag,
					beforeDrop: beforeDrop
				}
			};
		var mainNodes =[
			{ id:1, pId:0, name:"父节点 1", open:true},
			{ id:11, pId:1, name:"叶子节点 1-1"},
			{ id:12, pId:1, name:"叶子节点 1-2"},
			{ id:13, pId:1, name:"叶子节点 1-3"},
			{ id:2, pId:0, name:"父节点 2", open:false},
			{ id:21, pId:2, name:"叶子节点 2-1"},
			{ id:22, pId:2, name:"叶子节点 2-2"},
			{ id:23, pId:2, name:"叶子节点 2-3"},
			{ id:3, pId:0, name:"父节点 3", open:false},
			{ id:31, pId:3, name:"叶子节点 3-1"},
			{ id:32, pId:3, name:"叶子节点 3-2"},
			{ id:33, pId:3, name:"叶子节点 3-3"}
		];
		var objNodes =[
		 			{ id:1, pId:0, name:"#32770_设置 Windows Internet Explorer", options:"156465",open:true,drag:false},
		 			{ id:11, pId:1, name:"DirectUIHWND_稍后询问", options:"156465"},
		 			{ id:2, pId:0, name:"IEFrame_360导航_新一代安全上网导航 - Windows Internet Explorer", open:false,drag:false},
		 			{ id:21, pId:2, name:"IEFrame_关闭_2"},
		 			{ id:3, pId:0, name:"IEFrame_360影视-更新更全更受欢迎的影视网站-在线观看 - Windows Internet Explorer", open:false,drag:false},
		 			{ id:31, pId:3, name:"IEFrame_关闭"},
		 			{ id:4, pId:0, name:"SWT_Window0_Java EE - TestLab/WebContent/index.html - Eclipse", open:false,drag:false},
		 			{ id:41, pId:4, name:"SysTreeView32"},
		 			{ id:5, pId:0, name:"Shell_TrayWnd", open:false,drag:false},
		 			{ id:51, pId:5, name:"MSTaskListWClass_Intenret Explorer"}
		 		];

		function beforeDrag(treeId, treeNodes) {
			for (var i=0,l=treeNodes.length; i<l; i++) {
				if (treeNodes[i].drag === false) {
					return false;
				}
			}
			return true;
		}
		function beforeDrop(treeId, treeNodes, targetNode, moveType) {
			return targetNode ? targetNode.drop !== false : true;
		}
		
		$(document).ready(function(){
			$.fn.zTree.init($("#mainTree"), mainSetting, mainNodes);
			$.fn.zTree.init($("#objTree"), objSetting,objNodes);
		});
	</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'west',split:true" style="width:50%;	">
		<div class="zTreeDemoBackground left">
			<ul id="mainTree" class="ztree"></ul>
		</div>
    </div>
    <div data-options="region:'center',split:true">
		<ul class="nav nav-tabs">
			<li class="active"><a data-toggle="tab" href="#objLibrary">对象库</a></li>
			<li><a data-toggle="tab" href="#builtFun">内置函数</a></li>
			<li><a data-toggle="tab" href="#scrState">脚本语句</a></li>
			<li><a data-toggle="tab" href="#customFun">自定义函数</a></li>
		</ul>
		<div class="tab-content" style="height:96%;">
			<div id="objLibrary" class="tab-pane fade in active" style="height:100%;">
				<div id="cc" class="easyui-layout"  data-options="fit:true">
					<div class="right">
						<ul id="objTree" class="ztree"></ul>
					</div>
				</div>
			</div>
			<div id="builtFun" class="tab-pane fade">
				<ul class="easyui-tree">
					<li>
						<span>脚本函数</span>
						<ul>
							<li>
								<span>激活窗口(String)</span>
							</li>
							<li>
								<span>调用脚本(String)</span>
							</li>
							<li>
								<span>启动外部程序(String)</span>
							</li>
							<li>
								<span>开始时间(String)</span>
							</li>
							<li>
								<span>结束时间(String)</span>
							</li>
						</ul>
					</li>
					<li>
						<span>截屏函数</span>
						<ul>
							<li>
								<span>截屏()</span>
							</li>
						</ul>
					</li>
					<li>
						<span>校验函数</span>
						<ul>
							<li>
								<span>校验数据库(String,String,String,String,String,String)</span>
							</li>
							<li>
								<span>校验数据库(String,String,String,String,String,String[])</span>
							</li>
							<li>
								<span>校验数据库(String,String,String,String,String,String[][])</span>
							</li>
							<li>
								<span>校验数据库(String,String,String,String,String,String)</span>
							</li>
							<li>
								<span>校验表格列(String,int,String[])</span>
							</li>
							<li>
								<span>校验表格行(String,int,String[])</span>
							</li>
						</ul>
					</li>
					<li>
						<span>鼠标屏幕函数</span>
						<ul>
							<li>
								<span>点击屏幕(int,int)</span>
							</li>
							<li>
								<span>点击屏幕(int,int,int)</span>
							</li>
							<li>
								<span>点击屏qe幕(int,int)</span>
							</li>
							<li>
								<span>点击eqe屏幕(int,int)</span>
							</li>
						</ul>
					</li>
					<li>
						<span>键盘屏幕函数</span>
						<ul>
							<li>
								<span>模拟键盘(String)</span>
							</li>
							<li>
								<span>模拟键dasd盘(String)</span>
							</li>
						</ul>
					</li>
					<li>
						<span>AR设置函数</span>
						<ul>
							<li>
								<span>关闭日志()</span>
							</li>
							<li>
								<span>关闭da日志()</span>
							</li>
							<li>
								<span>dasd关闭日志()</span>
							</li>
							<li>
								<span>asd关闭日志()</span>
							</li>
						</ul>
					</li>
					<li>
						<span>获取信息函数</span>
						<ul>
							<li>
								<span>获取文本值(String,String,int,int,int)</span>
							</li>
							<li>
								<span>获取文本值(String,String,int,int,int)</span>
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<div id="scrState" class="tab-pane fade">
				<ul class="easyui-tree">
					<li>
						<span>脚本函数</span>
						<ul>
							<li>
								<span>激活窗口(String)</span>
							</li>
							<li>
								<span>调用脚本(String)</span>
							</li>
							<li>
								<span>启动外部程序(String)</span>
							</li>
							<li>
								<span>开始时间(String)</span>
							</li>
							<li>
								<span>结束时间(String)</span>
							</li>
						</ul>
					</li>
					<li>
						<span>键盘屏幕函数</span>
						<ul>
							<li>
								<span>模拟键盘(String)</span>
							</li>
							<li>
								<span>模拟键dasd盘(String)</span>
							</li>
						</ul>
					</li>
					<li>
						<span>获取信息函数</span>
						<ul>
							<li>
								<span>获取文本值(String,String,int,int,int)</span>
							</li>
							<li>
								<span>获取文本值(String,String,int,int,int)</span>
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<div id="customFun" class="tab-pane fade">
				<ul class="easyui-tree">
					<li>
						<span>函数</span>
						<ul>
							<li>
								<span>函数1(String,int,int,String)</span>
							</li>
							<li>
								<span>函数2(String,int)</span>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

2）使用 zTree 实现不同树之间拖动复制不同节点名称的操作

    在 zTree 中可以自定义节点名称的名称属性，我们可以采用这种方式，来实现此功能。

var mainSetting = {
			edit: {
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false,
				drag: {
					autoExpandTrigger: false,
					isCopy: true,
					isMove: true,
					prev: false,
					next: true,
					inner: true
				}
			},
			data: {
				simpleData: {
					enable: true
				},
				key :{
					name : "name"
				}
			}
		};
var objSetting = {
			edit: {
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false,
				drag: {
					autoExpandTrigger: false,
					isCopy: true,
					isMove: false,
					prev: false,
					next: false,
					inner: false
				}
			},
			data: {
				simpleData: {
					enable: true
				},
				key :{
					name : "itemName",
				}
			}
		};

最好左右树之间节点的属性名称设为一致。

3）使用 zTree 实现冻结/隐藏子节点的操作

    这个功能在 zTree 的 Demo 中就有。

    <SCRIPT type="text/javascript">
        var setting = {
			view: {
				dblClickExpand: dblClickExpand
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};
        function dblClickExpand(treeId, treeNode) {//zTree的
			return treeNode.level > 0;
		}
    </SCRIPT>
    <style type="text/css">
        .ztree li span.button.switch.level0 {visibility:hidden; width:1px;}
        .ztree li ul.level0 {padding:0; background:none;}
	</style>

4）使用 zTree 实现节点的置灰/禁用操作

    zTree 中提供了 zTreeObj.setChkDisabled 方法来置灰/禁用当前节点，但这种禁用方法是通过节点的复选框 / 单选框被禁用方式实现的，在项目中没有单选/复选框的话，可以使用定义一个数组的形式，禁用时添加节点的 id，取消禁用时删除节点的 id。

        //右键禁用
		$scope.disabledTreeNode = function(){
			hideRMenu();//隐藏弹出框
			if($scope.ztreeNode){
				$scope.list.push($scope.ztreeNode.tId);//往list中添加节点的Id
				$scope.ztreeNode.iconSkin = "diy01";//更改节点的图标
				$scope.zTree.updateNode($scope.ztreeNode);
			}
			if($scope.ztreeNode.children){
				angular.forEach($scope.ztreeNode.children, function(each){  
    				$scope.list.push(each.tId);
    				each.iconSkin = "diy01";
    				$scope.zTree.updateNode(each);
				});
			}
		};
		//右键取消禁用
		$scope.cancelDisabledTreeNode = function(){
			hideRMenu();
			if($scope.ztreeNode){
				$scope.list.splice(getIndex($scope.ztreeNode.tId),1);//先获得index，然后删除list中的节点Id
				$scope.ztreeNode.iconSkin = "";//重置节点的图标
				$scope.zTree.updateNode($scope.ztreeNode);
			}
			if($scope.ztreeNode.children){
				angular.forEach($scope.ztreeNode.children, function(each){
    				$scope.list.splice(getIndex(each.tId),1);
    				each.iconSkin = "";
    				$scope.zTree.updateNode(each);
				});
			}
		};

在此会发现，功能实现了，效果没有实现，我们的图标还是没有任何变化，这时我们需要在 zTreeStyle.css 文件中增加如下内容：

.ztree li span.button.diy01_ico_open{margin-right:2px; background-position:2px -41px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.diy01_ico_close{margin-right:2px; background-position:2px -41px; vertical-align:top; *vertical-align:middle}
.ztree li span.button.diy01_ico_docu{margin-right:2px; background-position:2px -41px; vertical-align:top; *vertical-align:middle}

5）使用 zTree 实现复杂树形网络操作

    这个功能之前不了解，看了网上的资料后，发现复杂树形网络这一功能还是可以实现的。

    这是通过 excheck 扩展功能来实现的，例子如下：

var setting = {
    view: {
        showLine: false,
        addDiyDom: addDiyDom,
    },
    data: {
        simpleData: {
            enable: true
        }
    }
};
//自定义DOM节点
function addDiyDom(treeId, treeNode) {

}

 

Fellon9
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ztree 自定义参数_ztree的自定义编辑
weixin_39606638的博客
12-22 858
组织架构树是项目中特别常见的一类组件，我一般都用ztree，前两天又用到这个，不过需求跟平时有点区别，我感觉也算比较常见，就把他稍微整理一下。需求大致是这样：一个普通的树结构，点击编辑。会弹出来操作按钮，而且并不是所有用户都有增删改的权限，对该节点不具备的权限会置灰，如下图所示。我们知道ztree是带编辑功能的，但是长这样子而且ztree的官方demo的编辑按钮是在鼠标hover到节点以后才弹出来...
ZTree 控件关于禁用节点不能取值问题
weixin_34185560的博客
06-12 511
2019独角兽企业重金招聘Python工程师标准>>> ...
通过获取checkbox的选中状态实现对ztree整棵树设置禁用与启用的操作
笑到世界都狼狈的博客
06-19 2186
项目中有遇到当勾选一个checkbox框的时候将整颗ztree树的所有节点都禁用或启用，我百度一圈刚写好，需求又说不这样写了，虽然很无奈，但是还是得记下来，要不哪天他突然又说要这样操作了呢。。。。 html代码: <form name="form1" style="margin-left:10px;"> <input type="checkbox" id="chk...
史上最全，在vue中使用ztree实现树形结构（第三篇）
最新发布
qq_39285178的博客
04-26 770
首先看上面这个图，可能和ztree联系不起来对不对，不要怀疑，上面就是用ztree来实现的，只不过dom是我们自己定义的而已，可能很多人忽略了ztree的name属性，其实这个属性非常重要，可能很多人觉得，如果需要自己自定义dom，为什么不在ztree提供的addDiyDom中去操作呢？在公司呆了4年，现在想来最深的感受就是，凡是涉及到树性结构的，统统选择ztree准没错，我是ztree的忠实爱好者。这样当最终结构渲染出来之后，修改对应的类名就行了。最终的结构都出现了，再想去绑定各种事件就洒洒水了。
ZTree基本使用及本人详解
刘大猫
03-30 1万+
文章目录ZTree树简介简介ZTree的特点练习ztree之前的小建议ZTree文件介绍ZTree的配置介绍ZTree使用案例需求1：前端初始化数据（标准json数据）前端代码需求2：后端查询ztree数据（简单JSON数据）+需求3：设置节点默认选中+需求4：【添加/编辑/删除】节点+需求5：自定义图标固定和不固定显示前端代码后端代码需求6：左侧菜单栏前端代码需求7：拖拽节点高级控制前端代吗需求8：2棵树之间的数据交互前端代吗 ZTree树简介 简介 ZTree的特点 练习ztree之前的小建议 如
zTree笔记，设置无法勾选父节点（禁用父节点）和父节点禁用时回显选中子节点时关联父节点状态
weixin_44651438的博客
04-19 3231
zTree API zTree Demo 最近又用到了zTree，虽然zTree的APi已经很全很方便很易懂了，但是难免有的方法找不到。为了方便他人方便自己，做下笔记记录下 zTree笔记1 设置无法选择父节点 要达成这个目的，思路是绑定一个勾选的回调事件，此时判断选中的是否为父节点，是的话return false勾选状态不变 代码如下： callback: { bef...
实例详解ztree在vue项目中使用并且带有搜索功能
10-18
在Vue项目中集成zTree并实现搜索功能，可以极大地提升用户界面的交互性和用户体验。zTree是一个基于jQuery的树插件，它具有优秀的性能、灵活的配置和多种功能的组合。下面将详细介绍如何在Vue环境中使用zTree，并...
ssm项目结合zTree实现异步加载树。
12-14
在Web应用中，我们经常需要展示层级结构的数据，例如组织结构、目录树等，这时zTree就是一个很好的解决方案。 zTree是一个基于jQuery的树插件，它提供了丰富的配置选项和API，支持多种数据格式，包括JSON、XML等，...
ztree自定义tag
04-10
在本文中，我们将深入探讨如何在ZTree中实现自定义tag，以及这一功能在实际场景中的应用。 首先，了解ZTree的基本结构是至关重要的。ZTree的数据源通常由JSON数组构成，每个JSON对象代表树中的一个节点。在这些对象...
zTree帮助文档_ztree_
09-29
**zTree概述** zTree是一款基于JavaScript的树形插件，广泛应用于网页中展示层级结构...总之，zTree是一个强大且易用的树形插件，结合其详尽的API和CHM帮助文档，开发者能够轻松地在项目中构建出功能丰富的树形界面。
在AngularJS中使用jQuery的zTree插件的方法
11-22
前段时间一直在看AngularJS的资料，感觉是个很好的框架，很想有机会尝试用它做点什么。 jQuery ZTree是国内...因此，花了一点时间做了一个例子将ZTree应用到AngularJS中。 zTree和后台数据的交互 首先，肯定是在页面
zTree勾选状态的禁用节点不在选中节点里
weixin_30690833的博客
08-11 650
问题描述： 　　由于业务需求，需要将一部分节点设置为选中并且是禁用的状态。设置这部分节点的chkDisabled和checked属性值都为true。在zTree树上这部分节点是选中且禁用的状态，但是在保存结果中，所有选中节点的结果集里并没有包含禁用的那些节点。 解决办法： 　　单独保存被禁用的节点id，同样是因为业务需求，我只需要保存根节点的id,根节点选中或者禁用后它的所有子结点都设置为选...
jquery zTree的基本用法
Andrewniu的博客
08-10 1687
如果给我1个小时解答一道决定我生死的问题，我会花55分钟来弄清楚这道题到底是在问什么。一旦清楚了它到底在问什么，剩下的5分钟足够回答这个问题                                                                                                                                 ...
checkbox复选框第三个置灰状态设置方法方法
wnlwcg的专栏
03-04 3213
使用checkbox一般都是拖动一个 空间直接到界面上，我开始也是这么弄的，这种情况下找了好久，都没找到可以置灰的办法。 后来建立一个button控件，通过设置可以置灰。 具体步骤如下： 拖一个button控件，为其添加一个变量(m_checkBox) 在OnInitDialog()函数中设置 m_cCheckBox.ModifyStyle(0,WS_CHILD|
zTree 设置父节点checkbox不可点击
热门推荐
小猴子的博客
09-25 1万+
1.需求： 项目要求栏目树的父节点不可点击，点击子节点会关联选中父节点 2.方法： setting.callback.beforeCheck 用于捕获 勾选 或 取消勾选 之前的事件回调函数，并且根据返回值确定是否允许 勾选 或 取消勾选 默认值：null 3.项目中使用： // 设置 var settings = { view:
ztree动态设置节点颜色
yuxueyuanwj的博客
03-27 1万+
2019-03-27 0937 星期三 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://www.gongsi.com/mdp/taglib" prefix="m"%> <%@ page import...
Ztree树形菜单实现动态初始化、添加、删除、修改节点
蒙蒙宝贝
04-15 4156
Ztree树形菜单实现动态初始化、添加、删除、修改节点
vue2项目中ztree插件的使用
03-28
在 Vue2 项目中使用 ztree 插件，需要先将 ztree 的 JS 和 CSS 文件引入到项目中，然后再按照 ztree 的使用方法进行调用。 以下是一个简单的示例，演示如何在 Vue2 中使用 ztree 插件： 1. 在项目中引入 ztree 的 JS 和 CSS 文件，例如： ```html <link rel="stylesheet" href="path/to/ztree/css/zTreeStyle/zTreeStyle.css"> <script src="path/to/ztree/js/jquery-1.4.4.min.js"></script> <script src="path/to/ztree/js/jquery.ztree.all.min.js"></script> ``` 2. 在 Vue 组件中添加一个 `div` 元素，用于展示 ztree： ```html <template> <div id="tree"></div> </template> ``` 3. 在 Vue 组件的 `mounted` 钩子函数中，初始化 ztree： ```javascript mounted() { // ztree 数据 const zNodes = [ { name: "父节点1", open: true, children: [ { name: "子节点1" }, { name: "子节点2" } ]}, { name: "父节点2", open: true, children: [ { name: "子节点3" }, { name: "子节点4" } ]} ]; // ztree 配置项 const setting = { data: { simpleData: { enable: true } } }; // 初始化 ztree $.fn.zTree.init($("#tree"), setting, zNodes); } ``` 这样，在 Vue 组件中就可以使用 ztree 插件了。需要注意的是，由于 ztree 是基于 jQuery 的插件，因此在使用 ztree 时需要先引入 jQuery 库。另外，ztree 的具体使用方法可以参考官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值