ComponentAtr Web.UI 2009.2教程——TreeView右键菜单
实在找不到好的中文教程，我决定自己将平时工作中用的时候积累的经验，写下来，方便和我一样需要用到这个控件的朋友们学习，在这里抛砖引玉了。
TreeView
Node Context Menus( 带右键菜单的Tree)
有两个重要点 一个是 右键目录栏 一个是TreeView
右键目录栏：
<ComponentArt:Menu id="rightMemu"
Orientation="Vertical"
DefaultGroupCssClass="MenuGroup"
SiteMapXmlFile="rightMemuX.xml"
DefaultItemLookID="DefaultItemLook3"
DefaultGroupItemSpacing="1"
ImagesBaseUrl="menu_images/"
EnableViewState="false"
ContextMenu="Custom"
ShadowEnabled="true"
runat="server">
<ClientEvents>
<ItemSelect EventHandler="Menu_onItemSelect" />
</ClientEvents>
<ItemLooks>
<ComponentArt:ItemLook LookID="DefaultItemLook3" CssClass="MenuItem" HoverCssClass="MenuItemHover" ExpandedCssClass="MenuItemHover" LeftIconWidth="20" LeftIconHeight="18" LabelPaddingLeft="10" LabelPaddingRight="10" LabelPaddingTop="3" LabelPaddingBottom="4" />
<ComponentArt:ItemLook LookID="BreakItem" CssClass="MenuBreak" />
</ItemLooks>
</ComponentArt:Menu>
TreeView：
<ComponentArt:TreeView id="TreeView1" Height="260" Width="220"
KeyboardEnabled="false"
CssClass="TreeView"
NodeCssClass="TreeNode"
SelectedNodeCssClass="TreeNode"
HoverNodeCssClass="HoverTreeNode"
LineImageWidth="19" <%-- 树虚线的宽度--%>
LineImageHeight="20" <%--树虚线的高度 --%>
DefaultImageWidth="16"<%-- 树节点图片的宽度--%>
DefaultImageHeight="16"<%-- 树节点图片的高度--%>
NodeLabelPadding="3"<%--节点图片和 文字之间的间隔 --%>
ImagesBaseUrl="treeview_images/"<%--节点和文字之间的图片路径 --%>
ParentNodeImageUrl="folders.gif"
LeafNodeImageUrl="folder.gif"
ShowLines="true"<%-- 是否显示线--%>
LineImagesFolderUrl="treeview_images/lines/"<%--节点之间线的图片路径 --%>
EnableViewState="true"
SiteMapXmlFile="newTreeData.xml"<%-- 树节点用XML存的话可以用这个属性--%>
runat="server" >
<ClientEvents>
<ContextMenu EventHandler="TreeView1_onContextMenu" />
</ClientEvents>
</ComponentArt:TreeView>
在这里我们的TreeView喝右键目录栏都是用XML做的数据源：右键菜单一般都是用XML做数据源，至于TreeView大家可以用数据库充当数据源，因为在实际开发中，右键的菜单数量往往是固定不多少数的。下面是我的两个XML数据源，供大家参考：
rightMemuX.xml
<items>
<item Text="添加" Look-LeftIconUrl="icon_repeat.gif" Value="Add" Look-HoverLeftIconUrl="icon_repeat.gif"/>
<item Text="修改" Look-LeftIconUrl="icon_repeat.gif" Value="Update" Look-HoverLeftIconUrl="icon_repeat.gif"/>
<item Text="删除" Look-LeftIconUrl="icon_repeat.gif" Value="delete" Look-HoverLeftIconUrl="icon_repeat.gif"/>
<item Text="刷新" Look-LeftIconUrl="icon_repeat.gif" Value="Refence" Look-HoverLeftIconUrl="icon_repeat.gif"/>
</items>
newTreeData.xml
<Nodes>
<TreeViewNode Text="桌子" Value="01">
<TreeViewNode Text="桌子1" Value="0101" a="桌子" b="01" ImageUrl="calendar.gif" />
<TreeViewNode Text="桌子2" Value="0102" />
<TreeViewNode Text="桌子3" Value="0103" />
</TreeViewNode>
<TreeViewNode Text="椅子" Value="02">
<TreeViewNode Text="椅子1" Value="0201" />
<TreeViewNode Text="椅子2" Value="0202" />
<TreeViewNode Text="椅子3" Value="0203" />
</TreeViewNode>
<TreeViewNode Text="床" Value="03">
<TreeViewNode Text="床1" Value="0301" />
<TreeViewNode Text="床2" Value="0302" />
<TreeViewNode Text="床3" Value="0303" />
</TreeViewNode>
</Nodes>
主要的核心JS方法：
右键点击触发事件：TreeView1_onContextMenu
另一个是点击目录栏单击触发事件：Menu_onItemSelect
function Menu_onItemSelect(sender, eventArgs) {
var menuItem = eventArgs.get_item();
var contextDataNode = menuItem.get_parentMenu().get_contextData();
alert(menuItem.get_text());
alert(menuItem.get_value());
alert(contextDataNode.get_text());
alert(contextDataNode.get_value());
alert(contextDataNode.Data[0][1]);
alert(contextDataNode.Data[1][1]);
alert(contextDataNode.Data[2][1]);
alert(contextDataNode.Data[3][1]);
alert(contextDataNode.Data[4][1]);
return true;
}
function TreeView1_onContextMenu(sender, eventArgs) {
rightMemu.showContextMenuAtEvent(eventArgs.get_event(),eventArgs.get_node());
alert("点右键触发事件:" + eventArgs.get_node().get_text());
alert("点右键触发事件：" + eventArgs.get_node().Data[4][1]);
}
在右键点击的时候我们最重要的是获得Tree单个节点的Value Text 等等一些自定义的属性的值，以方便我们可以根据每次传来的id来做出相关的操作
var menuItem = eventArgs.get_item();
可以获得目录菜单中XML的整个单一节点值，很多人习惯用
menuItem.get_text()
menuItem.get_value()
来获得相应的value 和text，因为刚刚学习多于其中方法的不了解，我告诉大家在menuItem我们可以找到我们想要的属性和值
var contextDataNode = menuItem.get_parentMenu().get_contextData();
在这个方法里面我们可以获得相应节点的数值，和上面类似也是可以全部获得到
你想要的属性和值在这里都能找到，接下来你是用JS调用一般处理程序，还是怎么样实现增删改查就很简单了。
如果大家有好的中文教程谢谢与小编分享。
