YUI TreeView 右键显示 ContextMenu

最新推荐文章于 2020-10-27 09:34:01 发布

原创最新推荐文章于 2020-10-27 09:34:01 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#yui #function #object #tree #div #json

本文介绍如何在YUI的TreeView中集成ContextMenu，并详细解释了如何正确设置触发元素以确保菜单仅在节点文本区域显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

YUI的example没有带这个方面的例子。
我首先是自己摸索了一下。失败。
所以还是上了group去看看前人的总结。
有一个例子如下：

Re: [ydn-javascript] Re: Adding Context menu to Tree

chandhrudu,

I'm sorry -- I may be misunderstanding your question.?I posted to this thread a response to zmische about the Implementation Gallery...I did not post about a code sample for integrating ContextMenu with TreeView.牋

However, to answer the latter question...

(function(){

var init = function() {

//build a TreeView instance with one node:

var tree = new YAHOO.widget.TreeView("treediv");

var root = tree.getRoot();

var node1 = new YAHOO.widget.TextNode("Label for first node.", root);

tree.draw();

//get the element that we want to attach

//a context menu to; in this case, we'll

//attach it to the element encompassing

//the first (only) node in the tree:

var myContextEl = node1.getEl();

//create a ContextMenu with the TreeView's

//node as its trigger:

var oContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu", { trigger: myContextEl } );

oContextMenu.addItem("cut");

oContextMenu.addItem("copy");

oContextMenu.addItem("paste");

oContextMenu.render(document.body);

}

YAHOO.util.Event.on(window, 'load', init);

})();

</script>

<body>

</body>

</html>

This will create a one-node TreeView instance which, when you right-click on the node, pops up a context menu.

Regards,

Eric

但这意味着，一个树有多少个节点，就需要构建多少个ContextMenu。

后来才发现ContextMenu构造时，trigger是允许传入数组的。所以问题的焦点在于传入什么样类型的数组。

首先按照上文，没注意看，直接拿Node来塞。失败。
然后接着试着用Node.getEl()来塞。还是失败。其实失败的原因是因为Tree还没有draw，就调用node.getEl。这个时候是拿不到想要的东西的。所以先tree.draw。然后再node.getEl()。

问题开始简单化
声明一个数组，把node.getEl()都丢(push)进去，然后再构造一个ContextMenu，把数组当作trigger属性传入。
表面上，一切问题都解决了……

但是……事情再次发生变化，点击非节点的旁边区域（比如节点文字右侧），照样还是弹出了ContextMenu。这显然不是俺们想要的。所以继续研究一下……
我们需要的是右键菜单弹在节点文本区域，所以应该要获得那个<a/>。
这个时候api文档又发挥作用了：
TextNode有个方法

getLabelEl

object getLabelEl ( )

Returns the label element

Returns: object

the element

所以把getEl改成getLabelEI，问题就解决。
暂时记录到这里。下面是代码片断，自己修改吧，哇哈哈哈哈……

function buildTreeNodeFromArray(arr,parentNode){

var arrLen = arr.length ;

for(var i = 0 ; i < arrLen ; i++){

var jsonNode = arr[i];

var tmpNode = new YAHOO.widget.TextNode(jsonNode, parentNode, false);

nodesArray.push(tmpNode);

if(jsonNode.children ) {

buildTreeNodeFromArray(jsonNode.children,tmpNode);

}

function makeMenu(){

var na = [] ;

var arrLen = nodesArray.length ;

//alert(arrLen);

for(var i =0 ; i < arrLen ;i ++){

var ele = nodesArray[i].getLabelEl();

na.push(ele);

//YAHOO.util.Event.addListener(ele, "mouseover", mouseOver);

//YAHOO.util.Event.addListener(ele, "mouseout", mouseOut);

}

//alert(nodesArray.length);

var aMenuItems = [ { text: "Refresh subtree" } ];

var oContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",

{ trigger: na,itemdata: aMenuItems}

);

oContextMenu.render(document.body);

}

备注：
nodesArray 是全局变量（数组）
arr 是以json格式存放的节点数据。

随便写的。懒得修改啦。先这样