为什么添加新节点时会自动添加2个以上的新节点

Question

@zTree 你好，想跟你请教个问题：

我第一次点击链接后，分类列表中添加新节点没问题，但是我再次点击一下链接后再添加新节点时会一次性添加2个以上的新节点，要怎么弄？

第一次点击链接后

第二次点击后

var zTree, rMenu;

function OnRightClick(event, treeId, treeNode) {
	if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
		zTree.cancelSelectedNode();
		showRMenu("root", event.clientX, event.clientY);
	} else if (treeNode && !treeNode.noR) {
		zTree.selectNode(treeNode);
		showRMenu("node", event.clientX, event.clientY);
	}
}

function showRMenu(type, x, y) {
	$("#rMenu ul").show();
	if (type == "root") {
		$("#m_del").hide();
	} else {
		$("#m_del").show();
	}
	rMenu.css({
		"top": y + "px",
		"left": x + "px",
		"visibility": "visible"
	});

	$("body").bind("mousedown", onBodyMouseDown);
}

function hideRMenu() {
	if (rMenu) rMenu.css({
		"visibility": "hidden"
	});
	$("body").unbind("mousedown", onBodyMouseDown);
}

function onBodyMouseDown(event) {
	if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
		rMenu.css({
			"visibility": "hidden"
		});
	}
}

function addTreeNode(newNode, addCount) {
	hideRMenu();
	var fNode = zTree.getSelectedNodes()[0];
	if (fNode) {
		zTree.addNodes(fNode, newNode);
		var cNode = zTree.getNodeByParam("temp", addCount, null);
		cNode.temp = 0
		cNode.Fid = fNode.Id;
		zTree.editName(cNode);
		return addCount;
	} else {
		zTree.addNodes(null, newNode);
		var nNode = zTree.getNodeByParam("temp", addCount, null);
		nNode.temp = 0
		nNode.Fid = "0";
		zTree.editName(nNode);
		return addCount;
	}
}

function postData(jsonData) {
	var str;
	$.ajax({
		type: "post",
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		url: "/green/category/create",
		data: jsonData,
		async: false,
		success: function(data) {
			str = data.Id;
		}
	});
	return str;
}

function editTreeNode() {
	hideRMenu();
	var nNode = zTree.getSelectedNodes()[0];
	if (nNode) {
		zTree.editName(nNode);
	}
}

function beforeRename(treeId, treeNode, newName, isCancel) {
	if (newName.length == 0) {
		alert("节点名称不能为空.");
		return false;
	}
	return true;
}

function onRename(e, treeId, treeNode, isCancel) {
	alert("---Name:" + treeNode.Name + "---Fid:" + treeNode.Fid);
	var id = postData(JSON.stringify(treeNode));
	treeNode.Id = id + "";
}

$(document).ready(function() {

	$("#cangkuguanli").bind("click", function() {
		$("#treeBox").css("display", "block");
		$("article").css("width", "544px");
		$("#tree").empty();

		var setting = {
			edit: {
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false
			},
			async: {
				enable: true,
				url: "green/category/list"
			},
			data: {
				key: {
					name: "Name"
				},
				simpleData: {
					enable: true,
					idKey: "Id",
					pIdKey: "Fid",
					rootPId: 0
				}
			},
			callback: {
				onRightClick: OnRightClick,
				onRename: onRename,
				beforeRename: beforeRename
			}
		};
		$.fn.zTree.init($("#tree"), setting);
		zTree = $.fn.zTree.getZTreeObj("tree");
		rMenu = $("#rMenu");

		var addCount = 1;

		$("#m_add").click(function() {
			var newNode = {
				Name: "新增" + (addCount++),
				temp: addCount
			};
			addTreeNode(newNode, addCount);
		});

		$("#m_rename").click(function() {
			editTreeNode();
		});

	});

});

Answer 1

贴吧上应该有同样问题的帖子。主要原因是……你使用了异步加载模式，当父节点好没有进行过异步加载时，你先在后台添加了节点数据，然后又在前端添加了节点，导致异步加载得到的数据中又出现了一遍。 解决办法，判断zAsync属性，如果该父节点需要进行异步加载，则不进行addNodes方法，即可