zTree使用实例

var this_;
    	var this_id;
    	var this_name;
    	var this_data;
    	var this_pId;
    	var p_tId;
    	//zTree配置开始
    	$(".zTreeDom_close").click(function(){//关闭zTree按钮
    		$(".zTreeDom").hide();
    		$("#treeDemo").hide();
    	})
    	$("#zTreeDom_save").click(function(){//保存数据
    		$("#ztree_add").hide();
    		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var child = treeObj.getNodes();	
			var ztreeNodes = [];
			function children (child) {
				for(var i = 0; i < child.length; i++){
					var data = {name:child[i].name,data:child[i].data};
					ztreeNodes.push(data);
					var childs = child[i].children;
					if(childs == undefined){
						continue;
					}else{
						children(childs);
					}
				}
			}
			children (child)
			console.log(ztreeNodes);
    	})
    	
    	
    	$(document).mousedown(function(){//右键的小菜单消失
    		$("#ztreeRight").hide();
    	});
    	$("#ztreeRight_add").mousedown(function(){
    		$("#ztree_add").show();
    		$("#add_content").find("input").eq(0).val("");
			$("#add_content").find("input").eq(1).val("");
    	})
    	$("#ztreeRight_remove").mousedown(function(){//确定是否删除节点弹框
    		var c = confirm("是否删除")
    		if(c == true){
    			var ztree = $.fn.zTree.getZTreeObj("treeDemo");
    			ztree.removeNode(this_);             //删除节点
    		}  			
    	})
    	
    	
    	$("#add_save").click(//弹框保存按钮
    		function(){
    			this_name = $("#add_content").find("input").eq(0).val();
    			this_data = $("#add_content").find("input").eq(1).val();
    			var rag = /^\s$/;
				if(rag.test(this_name) || rag.test(this_data) || this_name == "" || this_data == ""){
    				return alert("请输入内容");
    			}
    			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");        //添加节点
    			var newNode = {name:this_name, data:this_data};
    			treeObj.addNodes(this_, newNode);
    			$("#ztree_add").hide();
    		}
    	)
    	$(".add_close").click(//弹框关闭按钮
    		function(){
    			$("#ztree_add").hide();
    		}
    	)
    	
    	
    	
    	var dragId;
    	var p_tId;
		var setting = {
			view: {
				selectedMulti: false, //禁止多选
				addHoverDom: addHoverDom, //当鼠标移动到节点上时，显示用户自定义控件  
		        removeHoverDom: removeHoverDom, //离开节点时的操作  
			},
			edit: {
				enable: true, //zTree是否可编辑
				showRemoveBtn: true,//是否显示删除节点按钮
				showRenameBtn: false,//是否显示编辑按钮
				removeTitle: "删除",
				drag: {
			          prev: true, //拖拽节点，是否允许放在目标节点前
			          next: true, //拖拽节点，是否允许放在目标节点后
			          inner: false //拖拽节点，是否允许放在目标节点里
		        },
				//editNameSelectAll: true
			},
			data: {
				simpleData: {
					enable: true //初始化或添加节点时，是否使用简单的Arr数据
				}
			},
			callback: {
				beforeRemove: beforeRemove,
				beforeDrag: beforeDrag, 
				beforeDrop: beforeDrop, //拖拽之前，是否允许拖拽
				beforeRightClick:beforeRightClick,
				onRightClick: rightClick //右键事件  
			}
		};
 
		var zNodes =[
			{ id:1, pId:0, name:"总公司", open:true,data:20},
			{ id:2, pId:1, name:"一分公司", open:true},
			{ id:3, pId:2, name:"总经办", open:true},
			{ id:4, pId:3, name:"总经理", open:true},
			{ id:7, pId:3, name:"销售经理"},
			{ id:8, pId:3, name:"售后经理"},
			{ id:9, pId:1, name:"二分公司",open:true}
		];		
		
		function addHoverDom(treeId, treeNode) {  //自定义hover添加节点
			var sObj = $("#" + treeNode.tId + "_span"); //获取名字节点信息  
		    if (treeNode.level >= 3 || treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0){//最多出现一个加号按钮
		    	return;
		    } 
		    var addStr = "<span class='ztreeAddBtn button' id='addBtn_" + treeNode.tId + "' title='添加' data-target='#myModal' onfocus='this.blur();'></span>"; //定义添加按钮  
		    sObj.after(addStr); //在名字后面添加按钮  
		    var btn = $("#addBtn_"+treeNode.tId);//获取当前按钮
			btn.bind("click", function(event){  //添加按钮点击效果
				this_ = treeNode;
				$("#add_content").find("input").eq(0).val("");
				$("#add_content").find("input").eq(1).val("");
				$("#ztree_add").show();
				$("#ztree_add").css({left:event.clientX+$(document).scrollLeft()+100,top:event.clientY+$(document).scrollTop()-50});
			});    
		}
		
		function removeHoverDom(treeId, treeNode) {  //自定义hover添加节点
			$("#addBtn_"+treeNode.tId).unbind().remove();  
		}
		
		function beforeRemove(treeId, treeNode) {//hover删除按钮
			var c = confirm("是否删除");
			if(c){
				return true;
			}else{
				return false;
			}
		}
		
		function beforeDrag(treeId, treeNodes) {//拖拽之前获取当前的pId
			for (var i=0; i<treeNodes.length; i++) {
				   dragId = treeNodes[i].pId;
				   p_tId = treeNodes[i].getParentNode().tId;
			}
			return true;
		}
		function beforeDrop(treeId, treeNodes, targetNode, moveType) {
				  if(targetNode.pId == dragId && targetNode.getParentNode().tId == p_tId){//如果pId不同则不能拖拽过去
				    return true;
				  }else{
			        return false;
			      }
		}
		
		function beforeRightClick(treeId, treeNode) {
			if(treeNode != null){//只有右键点击文件才会出现小菜单
				return true;
			}else{
				return false;
			}
		};
		
		function rightClick(event, treeId, treeNode){//小菜单出现的位置以及出现的条件
			console.log(treeNode);
			this_pId = treeNode.pId;
			this_id = treeNode.id;
			this_ = treeNode;
			$("#ztreeRight").show();
			$("#ztreeRight").css({left:event.clientX+$(document).scrollLeft(),top:event.clientY+$(document).scrollTop()});
			if(treeNode.level >= 3){
				$("#ztreeRight_add").hide();
			}else{
				$("#ztreeRight_add").show();
			}
		};
		
		function selectAll() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
		};		
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			$("#selectAll").bind("click", selectAll);
		});
    	//zTree配置结束

<img src="https://img-blog.csdn.net/20161019132828048?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />