`

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>

分享到:
评论

相关推荐

    结点可以拖动,右键弹出操作菜单的树(dhtmlxtree改造)

    **右键菜单实现** 右键操作菜单是通过添加自定义的`onContext`事件处理器实现的。当用户右键点击树节点时,该事件会被触发,此时开发者可以创建并显示一个包含各种操作的上下文菜单。菜单项可以绑定到特定的函数,...

    dhtmlxTree树形控件JavaScript

    - **右键菜单**:可以使用`contextMenu`方法为特定节点或所有节点添加右键菜单。 7. **API和方法** dhtmlxTree提供了丰富的API,包括获取节点信息(如`getNodeId`、`getNodeHtml`),操作节点状态(如`enableItem...

    dhtmlxtree实例

    总结起来,dhtmlxtree是一个强大且灵活的JavaScript树形控件,通过其复选框、右键菜单和拖放功能,能够满足各种复杂的Web界面设计需求。开发者可以通过深入理解和熟练运用其API,创建出高效、易用的用户界面。

    功能更强的树节点

    综合这些文件,我们可以推断这是一个使用dhtmlXTree库实现的具有拖拽和右键菜单功能的树形视图组件。这个组件可以方便地在Web应用中展示和操作层次结构数据,提高用户的操作效率。在实际开发中,还需要考虑性能优化...

    Dhtmlxtree的例子

    在实际应用中,开发者可以根据需求对Dhtmlxtree进行深度定制,如调整节点的展开和折叠动画效果、添加右键菜单、实现节点的搜索和过滤等功能。同时,通过结合其他前端框架,如jQuery或Vue.js,可以进一步增强...

    dhtmlxTree 2.1

    同时,可能增加了新的API方法和属性,增强了用户体验,比如多选节点、搜索功能和右键菜单。 **6. 与其他dhtmlx组件集成** 由于dhtmlxTree属于dhtmlxSuite的一部分,它可以无缝地与dhtmlxGrid、dhtmlxCalendar、...

    dhtmlxTree

    dhtmlxTree支持多种操作,如节点的添加、删除、移动以及展开和折叠,同时还提供了自定义节点图标、拖放功能、右键菜单等功能。 **主要特性:** 1. **动态加载** - dhtmlxTree支持按需加载子节点,这极大地提高了...

    dhtmlxtree插件

    例如,可以设置节点的展开方式、是否启用复选框、自定义节点样式、添加右键菜单等。 综上所述,dhtmlxtree 插件是一个强大的JavaScript树形组件,适合用于构建动态导航栏和层次结构展示。其灵活的数据加载机制、...

    ajax动态加载树,支持动态刷新

    本文将深入探讨如何利用Ajax实现动态加载树形结构,并结合dhtmlx库中的dhtmlxMenu和dhtmlxTree组件,实现支持右键菜单、复选框、拖拽以及排序功能,同时支持json和xml格式的数据加载。 首先,我们要理解Ajax的工作...

    .NET下用js做的树

    这个组件支持大量的自定义选项,包括节点图标、右键菜单、节点状态(如选中、禁用等),并且支持JSON、XML等多种数据格式,方便与.NET服务器端交换数据。 "dhtmlxVault.zip"是一个文件上传组件,它可以与树形结构相...

    dhtmlTree样例

    2. **可扩展性**:提供API接口,可以自定义节点点击事件、拖拽操作、右键菜单等功能。 3. **样式定制**:允许通过CSS来调整树的外观,包括节点颜色、字体、图标等。 4. **多语言支持**:虽然样例是英文版,但...

    jstree源码

    - **dhtmlxTree.zip**:`dhtmlxTree`是另一个树形控件,但与`jstree`相似,可能是为了对比或集成目的。 - **vakata-jstree-978f9b4.zip**:这是`jstree`的一个特定版本,可能包含特定的修复或特性更新。 - **...

Global site tag (gtag.js) - Google Analytics