Remove From My Forums

TreeView 问题

问题
0

登录进行投票

我用Treeview控件
现在遇到一个问题，描述如下:

菜单的节点上，但我定义NavigateUrl=“”的值时，点击这个节点，该节点的颜色会变化

并且位置前移了一点，这个效果是我想要的，因为这样能知道当前点击了哪个菜单

可是一旦我定义了NavigateUrl的值，我发现这个效果就没有了，请问如何设置。

我现在点击一个NavigateUrl为空值的节点，有效果变色前移，然后我在点有NavigateUrl
值的节点，在指定的IFrame里可以显示我想要的页面，但是这个时候节点的焦点还是在刚才
那个没有定义NavigateUrl值的节点上，没有换到现在的节点上，请问如何解决！

我查了下代码，发现NavigateUrl赋值后事件是onclick="javascript:TreeView_SelectNode(TreeView1_Data, this,'TreeView1t1')

没有赋值的时候是onclick="TreeView_SelectNode(TreeView1_Data, this,'TreeView1t1')

看来应该是这个导致的，一个调用的是客户端，一个调用的是服务器端，请问如果修改，使赋值的也调用服务器端的

2010年7月2日 13:03

回复

|

引用

答案

登录进行投票

你好，

关于你说的颜色这种情况我测试了下，发现的确是这样的，可能treeview在设计的时候并没有考虑到你这种情况。

你可以通过样式来实现点击后的节点与其它节点的不一样。因为有NavigateUrl属性的node最后呈现的时候是以锚点的方式呈现的。

  <style type="text/css">
  
  a:visited{color:Green;}
  </style>
这样只要是被点击的锚点都会变成绿色。

可能这样离你的目标还比较远。

你试试使用脚本，给被点击的节点改变样式，同时使以前的节点背景色无，这样你每点击一次就得先恢复以前节点的背景色，再改变当前节点背景色，用一个变量记录当前该节点的id。

参考下面的例子，注意我使用了jquery：

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Populating TreeView Nodes from a SQL Database</title>
  <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>   
</head>
<body>
  <form id="form2" runat="server">
  <div>
  
    <h2>
      Populating TreeView Nodes from a SQL Database</h2>
    <asp:HiddenField ID="HiddenField1" runat="server" EnableViewState="true"/>
    <asp:TreeView ID="TreeView1" SkinID="Simple" Width="250" runat="server" OnTreeNodeDataBound="TreeView1_TreeNodeDataBound"
      ExpandDepth="0" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged" 
      ontreenodepopulate="TreeView1_TreeNodePopulate">
      <NodeStyle ForeColor="Black"> </NodeStyle> 
    <HoverNodeStyle Font-Underline="True" ForeColor="Red"> </HoverNodeStyle> 
    <SelectedNodeStyle BackColor="#FF6666" ForeColor="Black"> </SelectedNodeStyle> 
      <Nodes>
        <asp:TreeNode NavigateUrl="~/AnchorDemo.aspx" Text="AnchorDemo" >
          <asp:TreeNode Text="1" ></asp:TreeNode>
          <asp:TreeNode Text="02">
            <asp:TreeNode Text="2">
              <asp:TreeNode Text="21">
                <asp:TreeNode Text="211" NavigateUrl="~/test.htm" Target="testFrame" ></asp:TreeNode>
              </asp:TreeNode>
              <asp:TreeNode Text="22" NavigateUrl="~/tep.aspx" Target="testFrame"></asp:TreeNode>
            </asp:TreeNode>
          </asp:TreeNode>
          <asp:TreeNode Text="3">
            <asp:TreeNode Text="31">
              <asp:TreeNode Text="311"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="32"></asp:TreeNode>
          </asp:TreeNode>
        </asp:TreeNode>
        <asp:TreeNode NavigateUrl="~/Button.aspx" Text="Button"></asp:TreeNode>
      </Nodes>
      <NodeStyle ImageUrl="~/image/small.jpg" />
    </asp:TreeView>

  
  <script type="text/javascript" language="javascript">
    function changeBackColor(obj) {
      var id = document.getElementById("HiddenField1").value;
      if (id != "") {
        var ori = document.getElementById(id.toString());
        ori.style.backgroundColor = "";
      }
      alert(id);
      obj.style.backgroundColor = "green";
      document.getElementById("HiddenField1").value = obj.id;

    }
    $("#TreeView1").find("a").click(function () {
      changeBackColor(this);
    });
  
  </script>
  </form>
</body>
</html>

Microsoft Online Community Support

已标记为答案 KeFang Chen 2010年7月8日 5:55

2010年7月6日 3:36

全部回复