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调用一般处理程序，还是怎么样实现增删改查就很简单了。

如果大家有好的中文教程谢谢与小编分享。