两个 ztree 第二个addHoverDom方法不能调用

Question

@zTree 你好，想跟你请教个问题：我一个页面有两个ztree，一个是左侧菜单，一个是页面上的资源树。用的<jsp:include page="/WEB-INF/views/common/left.jsp">来引入左侧菜单。 已经确定两个ztree的id都不同。当引入左侧菜单时，资源树上面的自定义添加按钮就显示不出来。调试发现鼠标放上去没有进入addHoverDom方法。当我不引用的左侧菜单时就正常，有添加按钮。 

请问这个问题怎样解决？

left js代码：

var curMenu = null, zTree_Menu = null;

function menuAjaxDataFilter(treeId,parentNode,responseData){
	for (var i = 0; i < responseData.length; i++) {
		var item = responseData[i];
		item.target = "_self";
		if (null != item.resourceString) {
			if (0 == item.resourceString.indexOf('/')) {
				item.resourceString = bstBaseDomain + item.resourceString; 
			}else{
				item.resourceString = bstBaseDomain + "/" + item.resourceString; 
			}
		}
	}
	
	return responseData;
}

var tree_menu_setting = {
		view : {
			showLine: false,
			showIcon: false,
			selectedMulti: false,
			dblClickExpand: false,
			addDiyDom: addDiyDom
		},
		callback : {
			beforeClick: beforeClick,
			onAsyncSuccess: selectRightNode
		},
		async : {
			enable : true,
			url : bstBaseDomain + "/secResources/menuTreeNodes",
			type : "get",
			dataFilter: menuAjaxDataFilter
		},
		data : {
				simpleData: {
					enable: true,
					idKey: "resourceId",
					pIdKey: "parentId",
					rootPId: '0'
				},
			key : {
				name : "resourceName",
				url : "resourceString"
			}
		}

	};

function addDiyDom(treeId, treeNode) {
	var spaceWidth = 5;
	var switchObj = $("#" + treeNode.tId + "_switch"),
	icoObj = $("#" + treeNode.tId + "_ico");
	switchObj.remove();
	icoObj.before(switchObj);

	if (treeNode.level > 1) {
		var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
		switchObj.before(spaceStr);
	}
}

function beforeClick(treeId, treeNode) {
	if (treeNode.parent) {
		var zTree = $.fn.zTree.getZTreeObj("treeMenu");
		zTree.expandNode(treeNode);
		return false;
	}
	return true;
}

function selectRightNode(){
	var urlKey = window.location.href;
	var endIndex = urlKey.indexOf('?');
	if (-1 == endIndex) {
		endIndex = urlKey.length;
	}
	var startIndex = bstBaseDomain.length + 1; 
		//urlKey.lastIndexOf('/');
	urlKey = urlKey.substring(startIndex, endIndex);
	
	zTree_Menu.selectNode(zTree_Menu.getNodesByParamFuzzy("resourceString", urlKey)[0]);
}
$(document).ready(function(){
	var menuTreeObj = $("#treeMenu");
	$.fn.zTree.init(menuTreeObj, tree_menu_setting);
	zTree_Menu = $.fn.zTree.getZTreeObj("treeMenu");
	
	menuTreeObj.hover(function () {
		if (!menuTreeObj.hasClass("showIcon")) {
			menuTreeObj.addClass("showIcon");
		}
	}, function() {
		menuTreeObj.removeClass("showIcon");
	});
});

资源树js代码：

var lastValue = "", nodeList = [], fontCss = {};
var resTree, rMenu;
var key;
var tree_resources_setting = {
	view : {
		selectedMulti : false,
		addHoverDom : addHoverDomRes,
		removeHoverDom : removeHoverDom,
		fontCss : getFontCss
	},
	callback : {
		beforeDrag : beforeDrag,
		beforeDrop : beforeDrop,
		onClick : zTreeOnClick,
		onRemove : removeNode,
		onAsyncSuccess : function() {
			resTree.expandAll(true);
		}

	},
	edit : {
		// drag : {
		// isCopy : false,
		// isMove : true,
		// prev : true,
		// next : true,
		// inner : true
		// },
		enable : true,
		showRenameBtn : false,
		showRemoveBtn : showRemoveBtn
	},
	async : {
		enable : true,
		url : bstBaseDomain + "/secResources/resourceTree",
		type : "get"
	},
	data : {
		key : {
			name : "resourceName",
			title : "resourceString"
		}
	}

};

function removeNode(ev, id, node) {
	if (confirm("确定删除" + node.resourceName + "？")) {
		$.ajax({
			type : "post",
			url : bstBaseDomain + "/secResources/" + node.resourceId,
			data : {
				_csrf : sval,
				_method : 'delete',
				parentId : node.parentId
			},
			success : function(rdata, textStatus) {
				if (rdata.success) {
					alert('成功');
					afterUpdate();
				}
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				alert("出错了");
			},
			dataType : "json",
		});
	}
}

function nodeInfoToForm(treeNode) {
	$('#resourceForm')[0].reset();
	if (treeNode) {
		$('#resourceName').val(treeNode.resourceName);
		$('#resourceId').val(treeNode.resourceId);
		$('#resourceDesc').val(treeNode.resourceDesc);
		$('#resourceType').val(treeNode.resourceType);
		$('#resourceString').val(treeNode.resourceString);
		$('#module').val(treeNode.module);
		$('#parentId').val(treeNode.parentId);
		$('#priority').val(treeNode.priority);
		$('#parent').val(treeNode.parent);
	}
}

function addHoverDomRes(treeId, treeNode) {
	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() {
			resTree = $.fn.zTree.getZTreeObj("tree_resources");
			var newNode = {
				parentId : treeNode.resourceId,
				resourceName : "编辑中",
				parent : false
			};
			resTree.addNodes(treeNode, newNode);
			// 设置表单值
			nodeInfoToForm(newNode);
			return false;
		});
};
function removeHoverDom(treeId, treeNode) {
	$("#addBtn_" + treeNode.tId).unbind().remove();
};
function showRemoveBtn(treeId, treeNode) {
	return !treeNode.parent;
}

function searchNode(e) {
	var resTree = $.fn.zTree.getZTreeObj("tree_resources");

	var value = $.trim(key.get(0).value);
	var keyType = "";
	if ($("#resourceNameRdo").attr("checked")) {
		keyType = "resourceName";
	} else if ($("#resourceDescRdo").attr("checked")) {
		keyType = "resourceDesc";
		value = parseInt(value);
	} else if ($("#resourceStringRdo").attr("checked")) {
		keyType = "resourceString";
		value = parseInt(value);
	}
	if (key.hasClass("empty")) {
		value = "";
	}
	if (lastValue === value)
		return;
	lastValue = value;
	if (value === "")
		return;
	updateNodes(false);
	nodeList = resTree.getNodesByParamFuzzy(keyType, value);

	updateNodes(true);

}

function zTreeOnClick(ev, id, node) {
	nodeInfoToForm(node);
}

function beforeDrag(treeId, treeNodes) {
	for (var i = 0, l = treeNodes.length; i < l; i++) {
		if (treeNodes[i].drag === false) {
			return false;
		}
	}
	return true;
}

function beforeDrop(treeId, treeNodes, targetNode, moveType) {
	return targetNode ? targetNode.drop !== false : true;
}

function afterUpdate() {
	var nodes = resTree.getNodes();
	resTree.reAsyncChildNodes(null, "refresh");

	nodeInfoToForm();
}

function clickRadio(e) {
	lastValue = "";
	searchNode(e);
}

function getFontCss(treeId, treeNode) {
	return (!!treeNode.highlight) ? {
		color : "red",
		"font-weight" : "bold"
	} : {
		color : "#333",
		"font-weight" : "normal"
	};
}

function updateNodes(highlight) {
	var resTree = $.fn.zTree.getZTreeObj("tree_resources");
	for (var i = 0, l = nodeList.length; i < l; i++) {
		nodeList[i].highlight = highlight;
		resTree.updateNode(nodeList[i]);
	}
}
function focusKey(e) {
	if (key.hasClass("empty")) {
		key.removeClass("empty");
	}
}

function blurKey(e) {
	if (key.get(0).value === "") {
		key.addClass("empty");
	}
}

var resourceFormoptions = {
	url : "",
	success : function(res) {
		if (res.success) {
			// 成功 刷新树 清空表单
			afterUpdate();
		} else {
			alert(res.msg);
		}
	},
	dataType : "json"
};

$(document).ready(
		function() {
			$.fn.zTree.init($("#tree_resources"), tree_resources_setting);
			resTree = $.fn.zTree.getZTreeObj("tree_resources");
			rMenu = $("#rMenu");
			key = $("#key");
			key.bind("focus", focusKey).bind("blur", blurKey).bind(
					"propertychange", searchNode).bind("input", searchNode);
			$("#resourceStringRdo").bind("change", clickRadio);
			$("#resourceDescRdo").bind("change", clickRadio);
			$("#resourceNameRdo").bind("change", clickRadio);

			$('#resourceForm').submit(
					function() {
						// 设置表单提交地址
						var resId = $('#resourceId').val();
						if ('' == resId) {
							resourceFormoptions.url = bstBaseDomain
									+ '/secResources/create';
							$('input[name="_method"]').val('post');
						} else {
							resourceFormoptions.url = bstBaseDomain
									+ '/secResources/' + resId;
							$('input[name="_method"]').val('put');
						}

						$('#resourceForm').ajaxSubmit(resourceFormoptions);

						return false;
					});
		});

Answer 1

果然是这个问题，感谢！

Answer 2

检查js 资源文件 是否有反复加载的情况？