实现ztree结合jquery的smartMenu.js插件对目录树的增删改查

最新推荐文章于 2021-10-25 09:45:06 发布
最新推荐文章于 2021-10-25 09:45:06 发布
阅读量624 收藏 1
点赞数 2
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tsinbo1314/article/details/85247944
版权

 

问题：项目上遇到一个问题，需要作出一个目录树显示相关内容的层级结构关系。

插件：

目录树插件，在这里我选用了ztree，十分方便好用（UI有待提升哈~）下方是ztree插件 需要的自取

ztree插件

jquery.smartMenu.js，一个右击鼠标出现菜单栏的插件。感兴趣的自己百度一下。

代码：

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>物理位置管理</title>
		<link rel="stylesheet" type="text/css" href="css/zTreeStyle.css"/>
		<link rel="stylesheet" type="text/css" href="css/smartMenu.css"/>
	</head>
	<body>
		<div class="wrap">
			<div id="treePhy" class="ztree"></div>
		</div>
	</body>
	<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.ztree.all.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-smartMenu-min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/locationSet.js" type="text/javascript" charset="utf-8"></script>
</html>

js部分(locationSet.js)：

		var zTreeObjPhy;
		// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
		var setting = {
			check: {
				enable: false
			},
			view: {
				//双击节点是否展开
				dblClickExpand: true
			},
			edit: {
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false,
				drag:{
					isCopy:false,
					isMove:false
				}
			},
			data: {
				key: {
					children: "children",
					name: "name",
					title: "id",
					url: "link"
				},
				simpleData: {
					//使用简单数据模式，不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式
					enable: true
				}
			}
		};
		var oldarr = [];//同级的名称
		var oldarr2 = [];//下一级的名称
		var namelastname='';
		var istwoname_obj;
		var gettime = function(){
			var timestamp=new Date().getTime();
			return timestamp
		}
		var addCount = 1;
		function addTreeNode() {               //增
			var name = "增加" + namelastname;
			var id = gettime()+'';
			id=Number(id.substr(-10));
			
			var parentid=zTree.getSelectedNodes()[0].id+"";
			if(oldarr2.indexOf(name)>-1){
				alert('新增加的名称为 "'+ name +'" 与原列表中的名称有重复，请先修改原名称')
				return false;
			}
			if (zTree.getSelectedNodes()[0]) {
				console.log('增加');
				zTree.addNodes(zTree.getSelectedNodes()[0], {id:id, pId:parentid, name:name});
//				$.ajax({
//					type: "post",
//					url: "url",
//					async: true,
//					dataType: "json",
//					contentType: "application/json",
//					data: JSON.stringify({
//						"id":id,
//						"parentid": parentid,
//						"name": name
//					}),
//					success: function (data) {
//						console.log(data);
//						if(data.code==0){
//							alert("添加成功");
//							zTree.addNodes(zTree.getSelectedNodes()[0], {id:id, pId:parentid, name:name});
//						}else{
//							alert("请展开目录后添加");
//						}
//					},
//					error: function(){
//						alert("请求失败");
//					}
//				});
 
 
 
 
 
			} else {
				zTree.addNodes(zTree.getSelectedNodes()[0], {id:id, pId:0, name:newNode.name});
			}
			
		}
		function removeTreeNode() {              //删除
			var nodes = zTree.getSelectedNodes();
			if (nodes && nodes.length>0) {
				if(confirm("确认删除 节点吗？")){
					console.log('删除');
					if (nodes[0].children && nodes[0].children.length > 0) {
						var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
						if (confirm(msg)==true){
							zTree.removeNode(nodes[0]);
							alert("删除成功");
						}
					} else {
						zTree.removeNode(nodes[0]);
						alert("删除成功");
					}
//					$.ajax({
//						type: "post",
//						url: "url",
//						async: true,
//						dataType: "json",
//						contentType: "application/json",
//						data: JSON.stringify({
//							"id": nodes[0].id
//						}),
//						success: function (data) {
//							if (nodes[0].children && nodes[0].children.length > 0) {
//								var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
//								if (confirm(msg)==true){
//									zTree.removeNode(nodes[0]);
//									alert("删除成功");
//								}
//							} else {
//								zTree.removeNode(nodes[0]);
//								alert("删除成功");
//							}
//						},
//						error: function(){
//							alert("请求失败");
//						}
//					});
				}
			}
		}
 
		function edit() {         //编辑
			var zTree = $.fn.zTree.getZTreeObj("treePhy");
			var nodes = zTree.getSelectedNodes();
			
			treeNode = nodes[0];
			
			if (nodes.length == 0) {
				alert("请先选择一个节点");
				return;
			}
			zTree.editName(treeNode);
			
		};
 
		var zTree, rMenu;
		$(document).ready(function(){
			var zNodes =[];
//			$.ajax({
//	           type: "post",
//	           url: "url",
//	           async: false,
//	           dataType: "json",
//	           contentType: "application/json",
//	           data: JSON.stringify({ }),
//	           success:function(data){
//	           		if(data.code==0){
//	           		    var tree = data.data;
//	           		    for(var i=0,len=tree.length;i<len;i++){
//							if(i==0){
//								zNodes.push({ 
//		           		        	id:tree[i].id,
//		           		        	pId:tree[i].parentid,
//		           		        	name:tree[i].name,
//		           		        	open:true,
		           		        	noR:true
//		           		        });
//							}else{
//								zNodes.push({ 
//									id:tree[i].id,
//									pId:tree[i].parentid,
//									name:tree[i].name,
//								});
//							}
//	           		    }
//	           		}
//	           }
//	       });
	       	var zNodes=[//页面初始数据
				{ id:1, pId:0, name:"智能照明系统", open:true},
				{ id:11, pId:1, name:"大楼1", open:true},
				{ id:111, pId:11, name:"楼层1-1"},
				{ id:112, pId:11, name:"楼层1-2"},
				{ id:12, pId:1, name:"大楼2", open:true},
				{ id:121, pId:12, name:"楼层2-1"},
				{ id:122, pId:12, name:"楼层2-2"},
				
			]
	       
			$.fn.zTree.init($("#treePhy"), setting, zNodes);
			zTree = $.fn.zTree.getZTreeObj("treePhy");
			rMenu = $("#rMenu");
		});
		
/*鼠标右击弹出事件 smartMenu部分*/
		var MenuData = [
    [{
    	text:"新增",
    	func:function() {//增加 
    		addTreeNode();
		}
    },
    {
    	text:"编辑",
    	func:function(){
    		edit();
    	}
    }
    ],
    [{
    	text:"删除",
    	func:function(){
    		removeTreeNode();
    	}
    }]
];
$("#treePhy").smartMenu(MenuData);

 

闲人孙大壮
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap Jstree 树形菜单的增删改查的实现源码
自由
03-17 3万+
1.首先需下载jstree的插件点击打开链接 2.在页面引入插件js文件css文件 <script type="text/javascript" src="plugins/jstree/_lib/jquery.cookie.js"> <script type="text/javascript" src="plugins/jstree/_lib/jquery.hotkeys.js">
树形结构菜单的增删改查
二十一克阳光！的博客
07-02 5363
树形结构的样例 约定：整个树形结构节点的层次最多能有3级。 数据库中表示树形结构 pid表示父节点id，name为节点名称，url为节点的链接地址，icon为节点旁边的图标。 关联方式是通过pid字段关联到父节点的id字段，建立父子关系； 后台代码 实体类 /** * (TMenu)实体类 * * @author sxyuser * @since 2020-06-30 20:38:25 */ public class TMenu implements Serializable { pr
d3节点上添加右键菜单，使用smartMenu.js
柒柒柒的博客
10-25 829
引入js<link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/smartMenu.css" type="text/css" /> <script type="text/javascript" src="http://www.zhangxinxu.com/study/js/jquery-smartMenu.js"></script> 添加右键菜单 // 添加右键菜单 // 定义菜.
树状插件 Jquery-zTree的基本用法
jazywoo_在路上
02-08 6895
【简介】 zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件  兼容 IE、FireFox、Chrome 等浏览器  在一个页面内可同时生成多个 Tree 实例  支持 JSON 数据  支持一次性静态生成 和 Ajax 异步加载 两种方式  支持多种事件响应及反馈  支持 Tree 的节点移动、编辑、删除  支持任意更换皮肤 /
jquery.ztree.all-3.5.min.js
肖肖肖丽珠的博客
03-14 6403
http://www.ztree.me/v3/main.php 这个是ztree的官网，里面有很多实用的小例子，参考这些例子来学习，能少走不少弯路（下载的ztree里也有demo可以参考，一样的东西）。1. jsp方面页面导入js，css如下：&lt;link rel="stylesheet" type="text/css" href="&lt;%=path %&gt;/css/zTreeStyl...
jquery.zTree.js.rar
09-12
jquery-1.4.4.min.js jquery.ztree.exhide.min.js jquery.ztree.exedit.min.js jquery.ztree.excheck.min.js jquery.ztree.core.min.js jquery.ztree.all.min.js jquery-1.4.4.js jquery.ztree.exhide.js jquery....
jquery.ztree.exhide.js
12-13
ztree实现模糊查询需要的依赖包：jquery.ztree.exhide.js
jQuery zTree插件快速实现目录树
12-08
jQuery zTree是一个基于jQuery的开源树形目录插件，它为快速构建网站的树状目录结构提供了便捷的方式。zTree的特性在于其丰富的功能和可扩展性，通过API可以实现各种自定义操作。使用zTree的基本步骤如下： 1. **...
JQuery-zTree-v2.6.rar_Java 8_jquery tree_jquery-ztree-2.6.js_jqu
09-19
1、兼容 IE、FireFox、Chrome 等浏览器 2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 ... 9、简单的参数配置 实现 灵活多变的功能
jquery.ztree.all.js
08-10
用于生成树形组件，javaScript的一个插件，用于使用树形的下拉组件！
jQuery动画下拉菜单Smart Menu
03-05
jQuery动画下拉菜单Smart Menu
基于jquery实现无限级树形菜单
11-27
本文实例为大家分享了基于jquery实现无限级树形菜单效果，具有一定的参考价值，具体内容如下 效果图： 实现代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无限级树形菜单</title> </head> [removed][removed] <style> ul.a{width:100%;cursor:pointer;padding:0 0px;color:white;} ul.a li{list-style-
dtree_JQuery　增加删除修改功能
11-03
dtree 增加删除修改功能 自测可用． dtree_JQuery实例.动态生成树
Smartmenu-开源
07-16
Smartmenu 是通过 Lirc 与遥控器一起使用的菜单应用程序。 它的目的是使远程与 Linux box 的使用尽可能简单和智能。
jquery.ztree树形插件简单的使用
学点的CSDN博客
06-25 434
zTree 是一个依靠 jQuery 实现的多功能 “树形插件”， 拥有较好的浏览器兼容性，有着丰富的功能以及可以自定义样式，满足大部分业务的开发。第二步是在Html创建zTree的div和ul标签，ul标签给上class="ztree"和一个ID，ID的名字随便取。第三步是认识zTree树形插件的格式，id和pId都是数据库中的主键，id和pId的区别是：id是子健，pId是父键。第四步是初始化zTree，定义ztree的配置参数setting，和申明一个空的zTree树形格式。
ztree基本使用
qq_31118787的博客
06-11 887
上图为敬。实现对目录树的编辑、新增、删除、拖拽更改父目录4个功能，会在高级功能里详细讲。一、基本文件引入
jquery-smartMenu鼠标反键菜单
qq383264679的专栏
07-30 2219
核心文件： 一、这是什么样的一个插件 我们都知道，默认状态下，我们右键web页面，会出现一个上下文菜单，例如下图： 这个插件能够做到鼠标反键，成上下文的菜单格式，效果图如下所示： 二、使用 此插件使用不需要任何图片资源，但是需要调用一段CSS样式，你可以在头部放入如下的一段CSS文件引入代码，脚本部分，显然，jQuery库以及插件脚本是少不
Jquery树插件zTree入门教程
热门推荐
-深水蓝-
03-19 4万+
关于zTree的介绍就搜吧。 这个例子的最终效果如下： 鼠标移动到一级目录时出现全选链接，点击全选链接该目录下的所有子项都被添加到收件人的文本框中，当然点击单个子项则添加一个。至于要添加些什么信息由自己决定。 1，下载zTee，页面引入jquery.js，根据功能需求添加zTree相应的js和css
jquery.ztree 最新版本代码
最新发布
05-31
您可以在 jQuery ZTree 的官方网站 https://www.ztree.me/ 上找到最新版本的代码。目前最新版本是 3.5.47。 您可以在官方网站的下载页面 https://www.ztree.me/v3/main.php#_zTreeInfo 下载最新版本的代码，或者在 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值