DhtmlxTree控件實現右鍵菜單的方法

DhtmlxTree控件實現右鍵菜單的方法

免費版的dhtmlxTree不支持右鍵菜單dhtmlxMenu，需要在源代碼dhtmlxtree.js中添加如下代碼：


dhtmlXTreeObject.prototype.enableContextMenu=function(menu){
if(!menu&&!menu.showContextMenu) throw new Error("錯誤的菜單對象!");

var _tree=this;
//綁定菜單事件處理函數
menu.attachEvent("onBeforeContextMenu",function(){
if(_tree.rclk_id){
return true;
}else{
return false;
}
});

menu.attachEvent("onClick",function(){
_tree.rclk_id=null;
});

//綁定樹控件相關時間處理函數
_tree.attachEvent("onClick",function(sId){
if(_tree.lastFocusItem){
if(_isIE)
_tree.lastFocusItem.className="standartTreeRow";
else
_tree.lastFocusItem.setAttribute("class","standartTreeRow");
}
_tree.lastFocusItem=_tree._idpull[sId].span;
});

_tree.attachEvent("onRightClick",function(id,e){
var srcEl=e.target||e.srcElement;

if(srcEl.tagName!="SPAN") return;
if(_tree.lastFocusItem){
if(_isIE)
_tree.lastFocusItem.className="standartTreeRow";
else
_tree.lastFocusItem.setAttribute("class","standartTreeRow");
}
_tree.lastFocusItem=srcEl;

if(_isIE)
srcEl.className="selectedTreeRow";
else
srcEl.setAttribute("class","selectedTreeRow");

_tree.rclk_id=id;
});
}

然後js中通過以下代碼就可實現（詳細可見dhtmlxMenu提供的Demo）：
_menu = new dhtmlXMenuObject(“ROOT”);
_menu.setImagePath(_menuImagePath);
_menu.setIconsPath(_menuIconsPath);
_menu.renderAsContextMenu(true);
_menu.loadXML(“dhtmlxmenu.xml?n="+new Date());

_tree = new dhtmlXTreeObject(“ROOT”, "100%", "100%", _treeId);
_tree.enableContextMenu(_menu);

其中dhtmlxmenu.xml格式爲：

<?xml version="1.0"?>
<menu>
<item id="muItem_ADD" text="新建子菜單項" img="new.gif"/>
<item type="separator"/>
<item id="muItem_EDIT" text="編輯菜單項" img="edit.gif"/>
<item type="separator"/>
<item id="muItem_UP" text="上移" img="undo.gif"/>
<item type="separator"/>
<item id="muItem_DOWN" text="下移" img="redo.gif"/>
<item type="separator"/>
<item id="muItem_DELETE" text="刪除菜單項" img="del.gif"/>
</menu>