jquery ztree 源目录只能够添加一级目录，子节点添加新的节点到当前节点下方

jquery ztree 根目录只能够添加一级目录，子节点添加新的节点到当前节点下方

这周老板要求用zTree 做东西：根目录只能够添加一级目录，子节点添加新的节点到当前节点下方

<!DOCTYPE html>
<html>
<head>
	<title>jquery-ztree</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css">
	<link rel="stylesheet" type="text/css" href="css/demo.css">

	<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.all-3.5.min.js"></script>
	<style type="text/css">
		.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
	</style>
	<script type="text/javascript" >
	var zTreeObj;
	var zNodes =[
			{ id:1, pId:0, name:"父节点 1",isParen:true, open:true},
			{ id:11, pId:1, name:"叶子节点 1-1"},
			{ id:12, pId:1, name:"叶子节点 1-2"},
			{ id:13, pId:1, name:"叶子节点 1-3"},
			{ id:14, pId:1, name:"叶子节点 1-4"},
			{ id:15, pId:1, name:"叶子节点 1-5"},
			{ id:16, pId:1, name:"叶子节点 1-6"},
			{ id:17, pId:1, name:"叶子节点 1-7"},
			{ id:18, pId:1, name:"叶子节点 1-8"},
			
		];
		
	
	setting={
		data: {
				simpleData: {
					enable: true,
				},
		},

		edit:{
			enable:true,
			editNameSelectAll: true,
			renameTitle: "编辑节点名称",
			showRemoveBtn: showRemoveBtn,
			drag:{
				inner: false,
			}
		},
		view:{
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
		},
	};

	function showRemoveBtn(treeId, treeNode) {
			return !treeNode.isParent;
	}

	function newleafTId(arr){
		var num=0;
		var max=0;
		for(var i=0;i<arr.length;i++){
			var str=arr[i].tId;
			num=parseInt(str.split("_")[1]);
			if(num>=max){
				max=num;
			}
			var tId="tree_"+max;
		}
		return tId;
	}
	
	
	var newCount = 1;
	function addHoverDom(treeId, treeNode) {
			/*获取当前节点的父节点，根节点为自己	parNode*/
			var treeObj = $.fn.zTree.getZTreeObj("tree");
			var nodea = treeObj.getNodeByTId(treeNode.parentTId);
			var parNode=(nodea===null?treeNode:nodea);

			var  sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='add node' onfocus='this.blur();'></span>";
			sObj.after(addStr);

			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("tree");
				zTree.addNodes(parNode, {id:(100 + newCount), pId:parNode.id, name:"new node" + (newCount++)});

				//在叶子节点添加新节点的时候，新的节点在叶子节点下方
				if (nodea!=null) {
					var	 nodes = treeObj.getNodes()[0].children;
					var  newTId=newleafTId(nodes);
					var node1 = treeObj.getNodeByTId(treeNode.tId);
					var node2 = treeObj.getNodeByTId(newTId);
					treeObj.moveNode(node1, node2, "next"); 
				};
				return false;
			});
			
		};
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();


		};


	$(function(){
		zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
	})

	</script>
</head>
<body>
	<div  style="margin-left: 200px;">
		<ul id="tree" class="ztree"></ul>
	</div> 
</body>
</html>

源文件：

jquery ztree 源目录只能够添加一级目录，子节点添加新的节点到当前节点下方

相关推荐