go.js 节点添加右键菜单

公司项目开发时，采用了go.js绘制节点关系图，需添加右键功能，采坑经历分享。

go.js API文档不太好懂，开发功能时，建议从实例入手，然后再去看API文档查找相关属性用法就很容易理解了。如图：

1.添加右键功能，如下图：

右键属性contextMenu，贴代码：

  //定义一个简单节点，右键属性contextMenu在节点内添加myDiagram.nodeTemplate =$(go.Node, "Auto",{ contextMenu: myContextMenu },$(go.Shape, "RoundedRectangle",// Shape.fill is bound to Node.data.colornew go.Binding("fill", "color")),$(go.TextBlock,{ margin: 3 },  // some room around the text// TextBlock.text is bound to Node.data.keynew go.Binding("text", "key")));//  ContextMenu，添加右键菜单，绑定事件，自定义菜单样式var myContextMenu =  $("ContextMenu",$("ContextMenuButton",$(go.TextBlock, "剪切",{alignment: go.Spot.Center,margin: 5,font: "12px sans-serif",opacity: 0.75,stroke: "#404040"}),{ click: function(e, obj) { handleCut(obj,'0');}}),$("ContextMenuButton",$(go.TextBlock, "复制",{alignment: go.Spot.Center,margin: 5,font: "12px sans-serif",opacity: 0.75,stroke: "#404040"}),{ click: function(e, obj) { handleCopy(obj,'1'); } }),$("ContextMenuButton",$(go.TextBlock, "删除",{alignment: go.Spot.Center,margin: 5,font: "12px sans-serif",opacity: 0.75,stroke: "#404040"}),{ click: function(e, obj) { handleDelete(obj,'2'); } }),$("ContextMenuButton",$(go.TextBlock, "变色",{alignment: go.Spot.Center,margin: 5,font: "12px sans-serif",opacity: 0.75,stroke: "#404040"}),{ click: function(e, obj) { handleColor(obj,'3'); } }));//右键事件
function handleCut(){console.log('剪切'）}；
function handleCopy(){console.log('复制'）}；
function handleDelete(){console.log('删除'）}；
function handleColor(){console.log('变色'）}；

注意！！此处的坑：版本问题，还有层级嵌套的节点组

1. go.js版本最好为GOJS 2.1 版本以上，目前测试过1.7 、1.8 版本，都不兼容添加右键功能，莫名其妙抛错；

2. 有层级嵌套的节点组，groupTemplate，nodeTemplate节点模板定义里都要添加右键属性contextMenu，如图：

以上就是右键添加的实现。

go.js 节点添加右键菜单相关推荐

关于FlexPaper 2.1.2版本二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单等相关问题...
原文:关于FlexPaper 2.1.2版本二次开发 Logo .打印.搜索.缩略图.添加按钮.js交互.右键菜单等相关问题先废话几句.最近用到文档在线浏览功能,之前用的是print2flash( ...
openlayer右键菜单_OpenLayers添加右键菜单
1. 首先修改 OpenLayers Events.js 定位到下面代码段,添加右键菜单事件: View Code OpenLayers.Events = OpenLayers.Class ...
chrome添加右键菜单收藏CSDN文章到我的博客
需求: 看到好的文章时,想收藏,但是chrome的收藏夹不支持搜索(虽然有其他插件可以用),收藏的多了以后不好找,而且万一某一天浏览器或系统重装,而没有登录同步数据或者没有导出由的话这些收藏就会丢失. ...
通过注册表添加右键菜单选项
通过注册表添加右键菜单选项,可以通过编写注册表文件实现,也可以直接在系统注册表中新建注册表. 以前一篇<使用 YUI Compressor 批量压缩JS/CSS>中的注册表为例. 一.通过 ...
在(CListView)列表视图中添加右键菜单的方法
使用弹出式菜单(PopMenu) 弹出式菜单(PopMenu)大家都熟悉,在WIN98的桌面上单击鼠标右键弹出的菜单就是弹出式菜单.通常情况下,弹出式菜单在鼠标右键单击时弹出,当然,也可以根据需要 ...
java 右键菜单_界面操作--添加右键菜单
[java]代码库package 添加右键菜单; import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent; impor ...
ListCtrl添加右键菜单(ListCtrl类里编辑，给ListCtrl 发送NM_RCLICK消息)
在开发中会用到右键菜单,我们来一起学习一下. 假如,我们现在已经准备好了列表,就差右键处理了. 1.在资源视图中的添加一个MENU,如图 2.给要添加右键菜单的ListCtrl子类,添加消息按 ct ...
merlin.acs的使用方法 merlin.acs添加右键菜单
阅读全文:http://www.cckan.net/forum.php?mod=viewthread&tid=39 看看这个怎么样吧直接看代码吧我就不多说了 1.先下载一下这个控件吧网上 ...
tkinter向文本框里加内容_给tkinter文本框添加右键菜单
给tkinter文本框添加右键菜单需求:直接右键点击使用tkinter创建的文本框是不会弹出菜单的.我们需要实现右键点击tkinter框架下的Entry对象.Text对象后弹出右键菜单可复制.粘贴和 ...

go.js 节点添加右键菜单

go.js 节点添加右键菜单相关推荐

最新文章

热门文章