`

动态定制Tree右键菜单

    博客分类:
  • Ajax
阅读更多

环境:Dojo 0.4

以下是核心代码,主要是是扩展了dojo.widget.TreeNodeV3,当然你也可以使用dojo.widget.TreeNode,方法一样,找到你的dojo源文件,重载一个合适的方法,将此方法copy过来进行重载方法的定义,以便动态创建节点时,根据条件设置右键菜单:

页面代码
  1. <%@ page language="java" pageEncoding="gbk"%>  
  2. <html>  
  3. <head>  
  4. <title>dojo tree</title>  
  5. <link href="${pageContext.request.contextPath}/css/css.css" rel="stylesheet" type="text/css">  
  6.   
  7. <script type="text/javascript" src="${pageContext.request.contextPath}/dojo/dojo.js"></script>  
  8. <script language="JavaScript" type="text/javascript">  
  9. dojo.require("dojo.widget.TreeV3");   
  10. dojo.require("dojo.widget.TreeNodeV3");   
  11. dojo.require("dojo.widget.TreeLoadingControllerV3");   
  12. dojo.require("dojo.widget.TreeRpcControllerV3");   
  13. dojo.require("dojo.widget.TreeSelectorV3");   
  14. dojo.require("dojo.widget.TreeDocIconExtension");   
  15. dojo.require("dojo.widget.TreeToggleOnSelect");   
  16. dojo.require("dojo.widget.TreeExpandToNodeOnSelect");   
  17. dojo.require("dojo.widget.Menu2");   
  18. dojo.require("dojo.widget.Tooltip");   
  19. dojo.require("dojo.widget.LayoutContainer");   
  20. dojo.require("dojo.widget.ContentPane");   
  21. dojo.require("dojo.widget.SplitContainer");   
  22. dojo.require("dojo.io");   
  23. dojo.require("dojo.string.common");   
  24. dojo.require("dojo.widget.TreeContextMenuV3");   
  25.   
  26. //扩展dojo.widget.TreeNodeV3类   
  27. dojo.widget.defineWidget(   
  28.     "dojo.widget.TreeNodeV3",    
  29.     dojo.widget.TreeNodeV3,    
  30.     function() {   
  31.         this.object = {};   
  32.     },   
  33.        
  34.        
  35.     {   
  36.     //====================   
  37.     //重载原有方法,获得相关属性,控制右键菜单项   
  38.     buildRendering: function(args, fragment, parent) {   
  39.         if (args.tree) {   
  40.             this.tree = dojo.lang.isString(args.tree) ? dojo.widget.manager.getWidgetById(args.tree) : args.tree;              
  41.         } else if (parent && parent.tree) {   
  42.             this.tree = parent.tree;   
  43.         }    
  44.         if (!this.tree) {   
  45.             dojo.raise("Can't evaluate tree from arguments or parent");   
  46.         }   
  47.         thisthis.domNode = this.tree.nodeTemplate.cloneNode(true);   
  48.         thisthis.expandNode = this.domNode.firstChild;   
  49.         thisthis.contentNode = this.domNode.childNodes[1];   
  50.         thisthis.labelNode = this.contentNode.firstChild;   
  51.         if (this.labelClass) {   
  52.             dojo.html.addClass(this.labelNode, this.labelClass);   
  53.         }   
  54.         if (this.contentClass) {   
  55.             dojo.html.addClass(this.contentNode, this.contentClass);   
  56.         }   
  57.         thisthis.domNode.widgetId = this.widgetId;   
  58.         thisthis.labelNode.innerHTML = this.title;   
  59.         //设置不可预览的节点   
  60.         if(this.isFolder || (this.nodeDocType && !(this.nodeDocType=='datasource' || this.nodeDocType=='sql'))){   
  61.             this.actionsDisabled = ['preview'];   
  62.         }   
  63.     }   
  64.     //======================   
  65.     }   
  66. );   
  67. dojo.hostenv.writeIncludes();   
  68.   
  69. //......others   
  70. </script>  
  71. <body>  
  72. ......   
  73. <div dojoType="TreeContextMenuV3" toggle="explode" contextMenuForWindow="false" widgetId="treeContextMenu">  
  74.     <div dojoType="TreeMenuItemV3" treeActions="addChild" iconSrc="../images/add.gif" caption="新建" widgetId="treeContextMenuCreate"></div>  
  75.     <div dojoType="TreeMenuItemV3" treeActions="edit" iconSrc="../images/edit.gif"    caption="编辑" widgetId="treeContextMenuEdit"></div>  
  76.     <div dojoType="TreeMenuItemV3" treeActions="remove" iconSrc="../images/del.gif"    caption="删除" widgetId="treeContextMenuRemove"></div>  
  77.     <div dojoType="TreeMenuItemV3" treeActions="preview" iconSrc="../images/preview.gif"    caption="预览" widgetId="treeContextMenuPreview"></div>              
  78. </div>     
  79. ......   
  80. </body>  
  81. </html>  
分享到:
评论

相关推荐

    Tree根据不同节点显示不同右键菜单

    "Tree根据不同节点显示不同右键菜单"是一个常见的需求,它涉及到数据结构、图形用户界面(GUI)设计以及事件处理等多个方面。这个功能使得用户能根据当前选择的树形结构节点,访问特定的功能或操作,从而提供更加...

    tree+完美右键菜单

    "Tree+完美右键菜单"是一个关于在网页中实现具有扩展功能的树形结构右键菜单的技术主题。在网页开发中,特别是在构建交互性强的Web应用程序时,右键菜单能够提供额外的操作选项,提高用户体验。以下是对这个主题的...

    echarts组织结构图及自定义右键菜单

    在本文中,我们将深入探讨如何使用ECharts 2.2.7版本实现组织结构图(Tree)以及自定义右键菜单,以帮助你更好地理解和应用这一功能。 首先,组织结构图在ECharts中是一种层次结构数据的展示方式,常用于表示公司、...

    EasyUI datagrid+tree右键+window弹出层

    在EasyUI中,我们可以自定义右键菜单项,与datagrid或tree配合,为用户提供定制化的操作选项。 4. Window弹出层: Window是EasyUI中的一个浮动窗口组件,可以用于弹出对话框、展示详细信息或进行操作确认。在这个...

    dtree动态树+Javascript右键菜单

    在实现dtree动态树和JavaScript右键菜单的过程中,主要涉及以下几个步骤: 1. **下载dtree控件**:可以从指定的网址获取dtree的源码文件,包括js、css和示例文件。 2. **部署文件**:将下载的文件按照一定的目录...

    Ext 中的Tree实现不同节点不同的右键菜单

    本篇将深入探讨如何在`Ext JS`中实现Tree组件的不同节点拥有不同的右键菜单,这对于提供定制化的用户体验是非常有用的。 `Ext JS`的Tree组件是一个可扩展的树形结构,用于展示层级数据。在默认情况下,Tree的所有...

    Jquery 右键菜单插件、css样式

    接下来,我们将详细讨论这些文件的功能和它们如何协同工作来实现右键菜单功能。 首先,`jquery-1.4.2.js` 是 jQuery 库的核心文件,它包含了所有 jQuery 的核心功能。在项目中引入这个文件后,开发者可以使用 ...

    C#TreeView使用(节点拖曳、节点右键菜单)

    在本教程中,我们将深入探讨如何利用C#来实现`TreeView`控件的功能,特别是节点的拖放操作和右键菜单功能,以及如何遍历`TreeView`的节点。 ### 一、节点拖放操作 1. **启用拖放功能**:首先,你需要启用`TreeView...

    dtree用法带右键菜单,带复选框

    ### dtree用法详解:集成右键菜单及复选框功能 #### 一、dtree简介 dtree 是一个基于 JavaScript 的轻量级树形菜单组件,它支持自定义节点内容,包括添加链接、图标等元素。此外,dtree 还提供了一些基本的功能,如...

    JsTree 最详细教程及完整实例

    3. **插件(Plugins)**:JsTree 通过插件机制扩展其功能,如 `checkbox` 插件实现复选框选择,`contextmenu` 插件提供右键上下文菜单。 ### 二、主要功能 1. **数据绑定(Data Binding)**:JsTree 可以绑定到 ...

    jsTree菜单大集合

    5. **插件**:jsTree拥有众多插件,如checkbox(复选框)、types(节点类型)、contextmenu(右键菜单)、dnd(拖放)等,这些插件可以进一步扩展jsTree的功能。 6. **服务器端集成**:如果你的菜单数据存储在...

    Tree菜单上下移动

    为了满足不同的业务需求,Tree菜单往往需要支持自定义扩展,如添加图标、自定义右键菜单、节点拖放等。开发者需要设计灵活的API和插件机制,让用户可以轻松扩展功能。 总结来说,"Tree菜单上下移动"是软件中常见的...

    jsTree 树状菜单插件

    2. **交互性**:用户可以通过点击、拖放、右键菜单等方式与树结构进行交互,例如展开/折叠节点、添加/删除节点、拖动节点重排等。 3. **丰富的主题和样式**:jsTree 提供多样的预设主题,可以轻松改变树的外观以适应...

    vc++精选树形控件中右键菜单的添加和响应

    在这个场景下,"vc++精选树形控件中右键菜单的添加和响应"是一个关键的话题,它涉及到如何在树形控件(Tree View Control)中集成右键菜单,并对用户的操作做出相应的处理。 树形控件是一种常见的控件类型,用于...

    Labview程序树形列表和右键弹出菜单.rar

    在"Labview程序树形列表和右键弹出菜单.rar"这个压缩包中,可能包含了使用LabVIEW实现树形列表和右键菜单的示例程序。通过学习和分析这些示例,你可以了解如何在实际项目中集成和使用这些功能。 总结来说,LabVIEW...

    jsTree动态tree

    jsTree内置了许多插件,如checkbox(复选框)、contextmenu(右键菜单)、search(搜索功能)等,可以通过配置启用。例如,启用复选框插件: ```javascript 'plugins': ['checkbox'], ``` ### 6. 事件处理 jsTree...

    一个很好用的树形菜单

    dhtmlxtree是实现这一功能的一个JavaScript库,它允许开发者创建动态、可交互的树形菜单,提供了丰富的定制选项和良好的用户体验。 【dhtmlxtree】是一个流行的开源JavaScript库,专门用于构建基于HTML和JavaScript...

    dtree+鼠标右键

    4. **自定义操作**:除了预设的快捷操作外,用户还可以根据自己的需求自定义右键菜单,比如添加对特定类型文件的操作,或者定制更复杂的命令。 5. **实用场景**:dtree+鼠标右键的组合特别适用于需要频繁在文件系统...

Global site tag (gtag.js) - Google Analytics