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格式存放的节点数据。

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