none
treeview 使用的一些疑问 RRS feed

  • 问题

  • 大家好,最近在用.net编写aspx时使用到了treeview(System.Web.UI.WebControls)这个控件
    但是遇到了一些问题不知道要如何解决,在这里希望可以得到解答

    第一,我的treeview会循环地添加父节点,同时在每个父结点下又添加子节点
    现在我想为父结点增加背景图而子节点不添加 ,用了两个办法都不太可行:
    1.在添加父节点时用ImageUrl属性,但是它的描述是---设置节点旁显示的图像的 URL,不是节点自身文字的背景
    2.使用样式表,这个倒是可以指定背景图像,但不知道要如何区分父、子节点,按链接a 元素来处理的话所有节点都有背景图了
    这个问题我挺头疼的,因为我还在想在选中某个子节点时想取得当前父节点、子节点对象,并分别把他们的背景图片、文字颜色什么的做个修改突出下效果呢。。

    第二,我点击某个父节点时希望只展开这个父节点而能自动把其他父节点都收缩
    一开始用了TreeNodeCheckChanged ,同时修改了TreeNode的SelectAction属性。但后来发现这个事件会自动刷新整个页面而不是单个treeview
    可以如何设置只让TreeNodeCheckChanged 对treeview刷新而不是整个页面刷新?

    谢谢大家了啊QAQ

    2013年1月6日 11:17

答案

  • 第二个问题,建议把TreeView扔到UpdatePanel中即可。

    或者恐怕你只得使用jQuery或者js方法进行对TreeView进行刷新处理。

    第一个问题:TreeView每一个Node都是包含在div中,因此可以这样考虑(我染色处理,你自己根据情况自行用jQuery更改):

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CSharp.WebForm1" %>
      
    <!DOCTYPE html>
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.8.3.js"></script>
        <script>
            function AutoColor() {
                $('#<%=TreeView1.ClientID%>').children("table").find("a").css("color", "red");
            }
        </script>
    </head>
    <body onload="AutoColor();">
        <form id="form1" runat="server">
        <div>
            
            <asp:TreeView ID="TreeView1" runat="server">
                <Nodes>
                    <asp:TreeNode Text="Father1" Value="Father1">
                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode Text="Father2" Value="Father2">
                        <asp:TreeNode Text="New Node" Value="New Node">
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                        </asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode Text="Father3" Value="Father3"></asp:TreeNode>
                </Nodes>
            </asp:TreeView>
        </div>
        </form>
    </body>
    </html>
    

    帮助一起改进论坛质量?提交你的意见于此。
    我的博客园
    慈善点击,点击此处
    和谐拯救危机,全集下载,净化人心

    • 已标记为答案 幻靈天 2013年1月8日 1:31
    2013年1月7日 2:32
  • <script>
            function AutoColor()
            {
                $('#<%=UpdatePanel1.ClientID%>').find('div').eq(0).children("table").find("a").css("color", "red");
            }
     
            $(function () {
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
                    AutoColor();
                })
            });
        </script>

    帮助一起改进论坛质量?提交你的意见于此。
    我的博客园
    慈善点击,点击此处
    和谐拯救危机,全集下载,净化人心

    • 已标记为答案 幻靈天 2013年1月8日 1:31
    2013年1月7日 8:18

全部回复

  • 第二个问题,建议把TreeView扔到UpdatePanel中即可。

    或者恐怕你只得使用jQuery或者js方法进行对TreeView进行刷新处理。

    第一个问题:TreeView每一个Node都是包含在div中,因此可以这样考虑(我染色处理,你自己根据情况自行用jQuery更改):

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CSharp.WebForm1" %>
      
    <!DOCTYPE html>
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.8.3.js"></script>
        <script>
            function AutoColor() {
                $('#<%=TreeView1.ClientID%>').children("table").find("a").css("color", "red");
            }
        </script>
    </head>
    <body onload="AutoColor();">
        <form id="form1" runat="server">
        <div>
            
            <asp:TreeView ID="TreeView1" runat="server">
                <Nodes>
                    <asp:TreeNode Text="Father1" Value="Father1">
                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode Text="Father2" Value="Father2">
                        <asp:TreeNode Text="New Node" Value="New Node">
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                        </asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode Text="Father3" Value="Father3"></asp:TreeNode>
                </Nodes>
            </asp:TreeView>
        </div>
        </form>
    </body>
    </html>
    

    帮助一起改进论坛质量?提交你的意见于此。
    我的博客园
    慈善点击,点击此处
    和谐拯救危机,全集下载,净化人心

    • 已标记为答案 幻靈天 2013年1月8日 1:31
    2013年1月7日 2:32
  • 第二个问题,建议把TreeView扔到UpdatePanel中即可。

    或者恐怕你只得使用jQuery或者js方法进行对TreeView进行刷新处理。

    第一个问题:TreeView每一个Node都是包含在div中,因此可以这样考虑(我染色处理,你自己根据情况自行用jQuery更改):

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CSharp.WebForm1" %>
      
    <!DOCTYPE html>
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.8.3.js"></script>
        <script>
            function AutoColor() {
                $('#<%=TreeView1.ClientID%>').children("table").find("a").css("color", "red");
            }
        </script>
    </head>
    <body onload="AutoColor();">
        <form id="form1" runat="server">
        <div>
            
            <asp:TreeView ID="TreeView1" runat="server">
                <Nodes>
                    <asp:TreeNode Text="Father1" Value="Father1">
                        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode Text="Father2" Value="Father2">
                        <asp:TreeNode Text="New Node" Value="New Node">
                            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                        </asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode Text="Father3" Value="Father3"></asp:TreeNode>
                </Nodes>
            </asp:TreeView>
        </div>
        </form>
    </body>
    </html>
    

    帮助一起改进论坛质量?提交你的意见于此。
    我的博客园
    慈善点击,点击此处
    和谐拯救危机,全集下载,净化人心

    谢谢,第二个问题参考使用updatepannel成功解决
    学习资料:http://blog.csdn.net/book_coolboy_cl/article/details/1566806

    不过第一个问题的js中包含了children是指仅查找到子节点时才染色处理吗?
    VS2008 .net 3.5 环境调试这个代码提示JScript 找不到对象。。。

    • 已标记为答案 幻靈天 2013年1月8日 1:31
    • 取消答案标记 幻靈天 2013年1月8日 1:31
    2013年1月7日 6:09
  • 请下载jQuery。然后引用它即可。否则无法使用的。

    http://jquery.com/download/

    注意我js处引用了jQuery文件:

    <script src="Scripts/jquery-1.8.3.js"></script>


    帮助一起改进论坛质量?提交你的意见于此。
    我的博客园
    慈善点击,点击此处
    和谐拯救危机,全集下载,净化人心


    2013年1月7日 6:10
  • 请下载jQuery。然后引用它即可。否则无法使用的。

    http://jquery.com/download/

    注意我js处引用了jQuery文件:

    <script src="Scripts/jquery-1.8.3.js"></script>


    帮助一起改进论坛质量?提交你的意见于此。
    我的博客园
    慈善点击,点击此处
    和谐拯救危机,全集下载,净化人心



    对jQuery不太了解。。就在想怎么平白多了一个脚本的引用。如果要使用另一个css样式比如background-image 可以直接修改吗?
    不过onload事件放在body上就会另一个问题,当treeview刷新的时候就不能重新填充颜色了。。变回网页上原有的超链接颜色设置。。
    2013年1月7日 7:07
  • @如果要使用另一个css样式比如background-image 可以直接修改吗?

    可以,那么就:

    <script>
            function AutoColor() {
                $('#<%=TreeView1.ClientID%>').children("table").find("a").css("background-image", "path or file");
            }
    </script>
    

    @不过onload事件放在body上就会另一个问题,当treeview刷新的时候就不能重新填充颜色了。。变回网页上原有的超链接颜色设置。。

    应该不会的,我测试过了。


    帮助一起改进论坛质量?提交你的意见于此。
    我的博客园
    慈善点击,点击此处
    和谐拯救危机,全集下载,净化人心

    2013年1月7日 7:24
  • @如果要使用另一个css样式比如background-image 可以直接修改吗?

    可以,那么就:

    <script>
            function AutoColor() {
                $('#<%=TreeView1.ClientID%>').children("table").find("a").css("background-image", "path or file");
            }
    </script>

    @不过onload事件放在body上就会另一个问题,当treeview刷新的时候就不能重新填充颜色了。。变回网页上原有的超链接颜色设置。。

    应该不会的,我测试过了。


    帮助一起改进论坛质量?提交你的意见于此。
    我的博客园
    慈善点击,点击此处
    和谐拯救危机,全集下载,净化人心

    我就是直接这样修改css 样式的。。不过好像无效

    而那个展开新的父节点时刷新整棵树以后确实就填充回默认的css 颜色去了,不是设定的颜色
    只有刚打开页面时才是

    奇怪了,vs2008

    2013年1月7日 7:55
  • <script>
            function AutoColor()
            {
                $('#<%=UpdatePanel1.ClientID%>').find('div').eq(0).children("table").find("a").css("color", "red");
            }
     
            $(function () {
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
                    AutoColor();
                })
            });
        </script>

    帮助一起改进论坛质量?提交你的意见于此。
    我的博客园
    慈善点击,点击此处
    和谐拯救危机,全集下载,净化人心

    • 已标记为答案 幻靈天 2013年1月8日 1:31
    2013年1月7日 8:18
  • 新的脚本可以避免这个问题,多谢!
    只是直接更换样式还不能正常工作,不过这已经不是主要的问题了
    我再研究研究选中子节点时怎么变换颜色,谢谢!

    2013年1月8日 1:30