Contrôle Treeview dans ASP .net

J'ai un contrôle treeview dans mon application web. Je construis cette vue arborescente dynamiquement. Y a-t-il un moyen de sélectionner un nœud et de changer la couleur du nœud sélectionné en utilisant javascript ou toute autre méthode fonctionnant du côté client (je veux dire sans publication).Contrôle Treeview dans ASP .net

J'utilise C# et asp.net à bulid ma demande

Source

2010-10-05 Null Pointer

pas de réponse encore :( –

EDIT (Pour expliquer un peu plus sur JQuery):
JQuery est un .js fichier contenant des fonctions JavaScript pour faciliter la navigation dans un document, sélectionner des éléments DOM, créer des animations, gérer des événements et développer des applications Ajax.

Vous pouvez télécharger le fichier jquery.js de JQuery official website, puis référence au fichier jquery.js (comme vous faites référence à d'autres fichier .js) avant d'appeler votre premier script JQuery, comme suit:

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

Ou bien, vous pouvez utiliser le JQuery.js file hosted by Google. C'est ce que j'ai fait pour mes tests. Ci-dessous le code complet de ma page .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>

Source

2010-10-06 14:30:19 bla

wow. C'est vraiment super. Merci Lee. Mais j'ai un doute de plus. J'ai un bouton sur le formulaire et je veux juste obtenir le noeud sélectionné value.its juste un exemple -> protected void Button1_Click (expéditeur d'objet, EventArgs e) { Button1.Text = TreeView1.SelectedNode.Value; } mais son donne une erreur comme ceci -> Référence d'objet non définie à une instance d'un objet. Y at-il un moyen de résoudre ce problème? Thnks again –

Lorsque vous supprimez les liens hypertexte en définissant l'action select sur 'none', la page ne fera pas de publication lorsque vous cliquerez sur le noeud. Par conséquent, aucune donnée n'est publiée sur le serveur, le serveur ne saura pas quel est le nœud actuellement sélectionné. Vous devez contourner votre code plus loin comme mettre le champ caché dans votre page. Je vous conseille plutôt d'utiliser Ajax UpdatePanel dans ce cas au lieu de faire autant de solutions de contournement :) – bla

Je vous remercie.Maintenant, je cherche sur les champs cachés: D. Tu m'aides beaucoup –

2 façons je pensé à mettre en œuvre cette:

Enveloppez votre TreeView avec l'Ajax UpdatePanel. C'est plus simple.
Supprimer le lien hypertexte des noeuds de l'arborescence à l'aide de la fonction récursive, puis lier l'événement de clic côté client à tous les noeuds à l'aide de JQuery.

Plus de détails pour la méthode 2 comme suit ..

Lieu contrôle treeview sur la page ASPX

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

Ajouter des noeuds fictifs et appeler la fonction récursive pour supprimer des liens hypertexte

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); 
    } 
}

Mettre en oeuvre la fonction récursive

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; 
}

Placez ce code JQuery à la page 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'); 
});

Source

2010-10-05 10:10:05 bla

Merci Lee Tout fonctionne bien sauf le code java est la façon dont j'ai placé le code est correct? la fonction mouseover et click ne se déclenche pas. je peux supprimer le lien hypertexte récursivement –

Avez-vous fait référence à jquery.js? – bla

Une autre possibilité est la classe CSS de votre nœud d'arbre. Je suis en train de coder en dur le nom de la classe. Un. Le vôtre pourrait ne pas être "TreeView1_0". – bla

Répondre

Questions connexes