YUI TreeView 右键显示 ContextMenu

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...


< script > ...
(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 >
     < div  id ="treediv" ></ div >
</ 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格式存放的节点数据。

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