Управление деревом в ASP .net - PullRequest
0 голосов
/ 05 октября 2010

У меня есть контроль дерева в моем веб-приложении. Я строю это дерево динамически.

В любом случае можно выбрать узел и изменить цвет выбранного узла, используя javascript или любой другой метод, работающий на стороне клиента (я имею в виду без обратной отправки).

я использую c # и asp.net, чтобы составить свое заявление

Ответы [ 2 ]

0 голосов
/ 06 октября 2010

РЕДАКТИРОВАТЬ (Чтобы объяснить немного больше о JQuery):
JQuery - это файл .js, содержащий функции JavaScript для упрощения навигации по документу, выбора элементов DOM, создания анимации, обработки событий и разработки приложений Ajax.

Вы можете скачать файл JQuery.js с официального сайта JQuery , а затем обратиться к файлу JQuery.js (как вы ссылаетесь на другой файл .js), прежде чем вызывать свой первый скрипт JQuery, следующим образом:

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

Или же вы можете использовать файл JQuery.js, размещенный в 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>
0 голосов
/ 05 октября 2010

2 способа, которые я могу придумать, чтобы реализовать это:

  1. Оберните свое древовидное представление с помощью Ajax UpdatePanel.Это более просто.
  2. Удалите гиперссылку из узлов дерева, используя рекурсивную функцию, затем свяжите событие щелчка на стороне клиента со всеми узлами, используя JQuery.Более подробная информация о методе 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');
    });
    
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...