ASP .net中的Treeview控件

时间:2010-10-05 06:21:23

标签: javascript treeview

我的Web应用程序中有一个treeview控件。我动态地构建这个树视图。

是否有选择节点并使用javascript或客户端运行的任何其他方法更改所选节点的颜色(我的意思是没有回发)。

我正在使用c#和asp.net来构建我的应用程序

2 个答案:

答案 0 :(得分:0)

我可以考虑实现这两种方式:

  1. 使用Ajax UpdatePanel包装您的树视图。这更直截了当。
  2. 使用递归函数从树节点中删除超链接,然后使用JQuery将客户端点击事件绑定到所有节点。

  3. 方法2的更多细节如下......

    将树视图控件放到aspx页面

    <asp:TreeView ID="TreeView1" runat="server"> </asp:TreeView>


    添加虚节点并调用递归函数以删除超链接

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //add dummy nodes
            TreeView1.Nodes.Add(new TreeNode() { Value = "1", Text = "One" });
            TreeView1.Nodes.Add(new TreeNode() { Value = "2", Text = "Two" });
            TreeView1.Nodes.Add(new TreeNode() { Value = "3", Text = "Three" });
    
            //call recursive function to remove hyperlinks
            RemoveHyperLinks(TreeView1, TreeView1.Nodes);
        }
    }
    


    实现递归函数

    System.Web.UI.WebControls.TreeView RemoveHyperLinks(System.Web.UI.WebControls.TreeView treeView, TreeNodeCollection treeNodes)
    {
        foreach (TreeNode node in treeNodes)
        {
            node.SelectAction = TreeNodeSelectAction.None;//here the link is removed
            if (node.ChildNodes != null && node.ChildNodes.Count > 0)
            {
                treeView = RemoveHyperLinks(treeView, node.ChildNodes);
            }
        }
        return treeView;
    }
    


    将此JQuery代码放在aspx页面上

    //change cursor to hand when user mouseover tree nodes
    $(".TreeView1_0").mouseover(function() {
        $(this).css('cursor', 'pointer');
    });
    
    
    //unbold all nodes then bold the selected node to indicate it's selected
    $(".TreeView1_0").click(function() {
        $(".TreeView1_0").css('font-weight', 'normal');
        $(this).css('font-weight', 'bold');
    });
    

答案 1 :(得分:0)

编辑(关于JQuery的更多解释):
JQuery是一个包含JavaScript函数的.js文件,可以更轻松地导航文档,选择DOM元素,创建动画,处理事件和开发Ajax应用程序。

您可以从JQuery official website下载JQuery.js文件,然后在调用第一个JQuery脚本之前引用JQuery.js文件(就像您引用其他.js文件一样),如下所示:

<script type="text/javascript" src="jQuery.js"></script>

或者,您可以使用JQuery.js file hosted by Google。这就是我为测试所做的。以下是我的.aspx页面的完整代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeView.aspx.cs" Inherits="TreeView" %>

<!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 type="text/javascript" 
        src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        // You may specify partial version numbers, such as "1" or "1.3",
        //  with the same result. Doing so will automatically load the 
        //  latest version matching that partial revision pattern 
        //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.4.2).
        google.load("jquery", "1.4.2");

        google.setOnLoadCallback(function() {
            // Place init code here instead of $(document).ready()

            //change cursor to hand when user mouseover tree nodes
            $(".TreeView1_0").mouseover(function() {
                $(this).css('cursor', 'pointer');
            });


            //unbold all nodes then bold the selected node to indicate it's selected
            $(".TreeView1_0").click(function() {
                $(".TreeView1_0").css('font-weight', 'normal');
                $(this).css('font-weight', 'bold');
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ID="TreeView1" runat="server">
        </asp:TreeView>
    </div>
    </form>
</body>
</html>