免费版的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>
分享到:
相关推荐
**右键菜单实现** 右键操作菜单是通过添加自定义的`onContext`事件处理器实现的。当用户右键点击树节点时,该事件会被触发,此时开发者可以创建并显示一个包含各种操作的上下文菜单。菜单项可以绑定到特定的函数,...
- **右键菜单**:可以使用`contextMenu`方法为特定节点或所有节点添加右键菜单。 7. **API和方法** dhtmlxTree提供了丰富的API,包括获取节点信息(如`getNodeId`、`getNodeHtml`),操作节点状态(如`enableItem...
总结起来,dhtmlxtree是一个强大且灵活的JavaScript树形控件,通过其复选框、右键菜单和拖放功能,能够满足各种复杂的Web界面设计需求。开发者可以通过深入理解和熟练运用其API,创建出高效、易用的用户界面。
综合这些文件,我们可以推断这是一个使用dhtmlXTree库实现的具有拖拽和右键菜单功能的树形视图组件。这个组件可以方便地在Web应用中展示和操作层次结构数据,提高用户的操作效率。在实际开发中,还需要考虑性能优化...
在实际应用中,开发者可以根据需求对Dhtmlxtree进行深度定制,如调整节点的展开和折叠动画效果、添加右键菜单、实现节点的搜索和过滤等功能。同时,通过结合其他前端框架,如jQuery或Vue.js,可以进一步增强...
同时,可能增加了新的API方法和属性,增强了用户体验,比如多选节点、搜索功能和右键菜单。 **6. 与其他dhtmlx组件集成** 由于dhtmlxTree属于dhtmlxSuite的一部分,它可以无缝地与dhtmlxGrid、dhtmlxCalendar、...
dhtmlxTree支持多种操作,如节点的添加、删除、移动以及展开和折叠,同时还提供了自定义节点图标、拖放功能、右键菜单等功能。 **主要特性:** 1. **动态加载** - dhtmlxTree支持按需加载子节点,这极大地提高了...
例如,可以设置节点的展开方式、是否启用复选框、自定义节点样式、添加右键菜单等。 综上所述,dhtmlxtree 插件是一个强大的JavaScript树形组件,适合用于构建动态导航栏和层次结构展示。其灵活的数据加载机制、...
本文将深入探讨如何利用Ajax实现动态加载树形结构,并结合dhtmlx库中的dhtmlxMenu和dhtmlxTree组件,实现支持右键菜单、复选框、拖拽以及排序功能,同时支持json和xml格式的数据加载。 首先,我们要理解Ajax的工作...
这个组件支持大量的自定义选项,包括节点图标、右键菜单、节点状态(如选中、禁用等),并且支持JSON、XML等多种数据格式,方便与.NET服务器端交换数据。 "dhtmlxVault.zip"是一个文件上传组件,它可以与树形结构相...
2. **可扩展性**:提供API接口,可以自定义节点点击事件、拖拽操作、右键菜单等功能。 3. **样式定制**:允许通过CSS来调整树的外观,包括节点颜色、字体、图标等。 4. **多语言支持**:虽然样例是英文版,但...
- **dhtmlxTree.zip**:`dhtmlxTree`是另一个树形控件,但与`jstree`相似,可能是为了对比或集成目的。 - **vakata-jstree-978f9b4.zip**:这是`jstree`的一个特定版本,可能包含特定的修复或特性更新。 - **...