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
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:
- the element
object
所以把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);
}
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格式存放的节点数据。
随便写的。懒得修改啦。先这样