两个 ztree 第二个addHoverDom方法不能调用
@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;
});
});