none
请教treeview 关于用javascript使选中的节点背景色改变的问题 RRS feed

答案

  • 请教treeview 关于用javascript使选中的节点背景色改变的问题;参考了孟子E张的文章:

    http://dotnet.aspx.cc/file/Get-Selected-node-Text-and-Value-Of-ASPNET-Treeview-using-JavaScript.aspx

    如果节点的SelectAction属性设置为了 :SelectAction="None",好像就不能获取选中节点的ID了;

    这时如果变更背景色是否要在后台添加方法呢?


    你可以用jQuery这样做:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplicationCSharp.WebForm1" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
        <script>
            $(function () {
                //首先获取span原来的颜色——
                var originalColor = $("span:first").css("background-color");
     
                $("span").click(function () {
     
                    //取消之前选中的所有背景色
                    $("span").css("background-color", originalColor);
     
                    $(this).css("background-color""red");
                });
     
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
     
     
        <asp:TreeView ID="TreeView1" runat="server">
            <Nodes>
                <asp:TreeNode SelectAction="None" Text="New Node" Value="New Node">
                    <asp:TreeNode SelectAction="None" Text="New Node" Value="New Node">
                    </asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode SelectAction="None" Text="New Node" Value="New Node">
                    <asp:TreeNode SelectAction="None" Text="New Node" Value="New Node">
                        <asp:TreeNode SelectAction="None" Text="New Node" Value="New Node">
                        </asp:TreeNode>
                    </asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
        </asp:TreeView>
     
     
        </form>
    </body>
    </html>
    
    注意:取消Select的话文字部分是<span>围绕,因此只要设置该部分的CSS属性就可以了。

       QQ我:讨论(Talk)
    下载MSDN桌面工具(Vista,Win7)
    我的博客园
    慈善点击,点击此处
    • 已标记为答案 Ken767 2011年12月20日 6:14
    2011年12月19日 9:45
  •  但是仍然设置了超链接属性,如果除了treeview还有超链接的话,会不会有问题?


    有。我建议你把超链接放到一个<div id="tree">……</div>中。这样你的jQuery就限定是针对这个div中的全部超链接做的。比如:

     $(function ()
    { //首先获取span原来的颜色——
       var originalColor = $("#tree span:first").css("background-color"); $("#tree span").click(function ()                                  { //取消之前选中的所有背景色 $("span").css("background-color", originalColor); $(this).css("background-color", "red"); }); })


       QQ我:讨论(Talk)
    下载MSDN桌面工具(Vista,Win7)
    我的博客园
    慈善点击,点击此处
    • 已标记为答案 Ken767 2011年12月20日 6:14
    2011年12月20日 1:21

全部回复

  • 请教treeview 关于用javascript使选中的节点背景色改变的问题;参考了孟子E张的文章:

    http://dotnet.aspx.cc/file/Get-Selected-node-Text-and-Value-Of-ASPNET-Treeview-using-JavaScript.aspx

    如果节点的SelectAction属性设置为了 :SelectAction="None",好像就不能获取选中节点的ID了;

    这时如果变更背景色是否要在后台添加方法呢?


    你可以用jQuery这样做:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplicationCSharp.WebForm1" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
        <script>
            $(function () {
                //首先获取span原来的颜色——
                var originalColor = $("span:first").css("background-color");
     
                $("span").click(function () {
     
                    //取消之前选中的所有背景色
                    $("span").css("background-color", originalColor);
     
                    $(this).css("background-color""red");
                });
     
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
     
     
        <asp:TreeView ID="TreeView1" runat="server">
            <Nodes>
                <asp:TreeNode SelectAction="None" Text="New Node" Value="New Node">
                    <asp:TreeNode SelectAction="None" Text="New Node" Value="New Node">
                    </asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode SelectAction="None" Text="New Node" Value="New Node">
                    <asp:TreeNode SelectAction="None" Text="New Node" Value="New Node">
                        <asp:TreeNode SelectAction="None" Text="New Node" Value="New Node">
                        </asp:TreeNode>
                    </asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
        </asp:TreeView>
     
     
        </form>
    </body>
    </html>
    
    注意:取消Select的话文字部分是<span>围绕,因此只要设置该部分的CSS属性就可以了。

       QQ我:讨论(Talk)
    下载MSDN桌面工具(Vista,Win7)
    我的博客园
    慈善点击,点击此处
    • 已标记为答案 Ken767 2011年12月20日 6:14
    2011年12月19日 9:45
  • "注意:取消Select的话文字部分是<span>围绕,因此只要设置该部分的CSS属性就可以了。"

     

    但是仍然设置了超链接属性,如果除了treeview还有超链接的话,会不会有问题?
    2011年12月19日 23:49
  •  但是仍然设置了超链接属性,如果除了treeview还有超链接的话,会不会有问题?


    有。我建议你把超链接放到一个<div id="tree">……</div>中。这样你的jQuery就限定是针对这个div中的全部超链接做的。比如:

     $(function ()
    { //首先获取span原来的颜色——
       var originalColor = $("#tree span:first").css("background-color"); $("#tree span").click(function ()                                  { //取消之前选中的所有背景色 $("span").css("background-color", originalColor); $(this).css("background-color", "red"); }); })


       QQ我:讨论(Talk)
    下载MSDN桌面工具(Vista,Win7)
    我的博客园
    慈善点击,点击此处
    • 已标记为答案 Ken767 2011年12月20日 6:14
    2011年12月20日 1:21
  •  但是仍然设置了超链接属性,如果除了treeview还有超链接的话,会不会有问题?


    有。我建议你把超链接放到一个<div id="tree">……</div>中。这样你的jQuery就限定是针对这个div中的全部超链接做的。比如:

     $(function ()
    { //首先获取span原来的颜色——
       var originalColor = $("#tree span:first").css("background-color"); $("#tree span").click(function ()                                  { //取消之前选中的所有背景色 $("span").css("background-color", originalColor); $(this).css("background-color", "red"); }); })


       QQ我:讨论(Talk)
    下载MSDN桌面工具(Vista,Win7)
    我的博客园
    慈善点击,点击此处


    还有一个问题,就是通过javascript上下移动节点,节点的移动只能在同一级中移动,不能移到上一级或下一级。

    我看源文件 ,asp.net 是通过table实现treeview的,这个功能是否无法实现啊?

    2011年12月20日 5:42
  •  但是仍然设置了超链接属性,如果除了treeview还有超链接的话,会不会有问题?


    有。我建议你把超链接放到一个<div id="tree">……</div>中。这样你的jQuery就限定是针对这个div中的全部超链接做的。比如:

     $(function ()
    { //首先获取span原来的颜色——
       var originalColor = $("#tree span:first").css("background-color"); $("#tree span").click(function ()                                  { //取消之前选中的所有背景色 $("span").css("background-color", originalColor); $(this).css("background-color", "red"); }); })


       QQ我:讨论(Talk)
    下载MSDN桌面工具(Vista,Win7)
    我的博客园
    慈善点击,点击此处


    还有一个问题,就是通过javascript上下移动节点,节点的移动只能在同一级中移动,不能移到上一级或下一级。

    我看源文件 ,asp.net 是通过table实现treeview的,这个功能是否无法实现啊?


    这已经不是同一个问题了。请标记以便结束这个问题,重新提问新问题。建议“一个问题一个帖子”。
       QQ我:讨论(Talk)
    下载MSDN桌面工具(Vista,Win7)
    我的博客园
    慈善点击,点击此处
    2011年12月20日 5:45