日期:2014-05-17  浏览次数:20857 次

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>