none
TreeView 问题 RRS feed

  • 问题

  • 我用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
    2010年7月6日 3:36

全部回复

  • 你好,

    关于你说的颜色这种情况我测试了下,发现的确是这样的,可能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
    2010年7月6日 3:36
  • 谢谢!我试试!
    2010年7月21日 7:53