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

 

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

插件：

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

ztree插件

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

代码：

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