Comment colorier un nœud treeview en javascript

Question

J'ai une vue arborescente et une texbox qui permet à un utilisateur de rechercher des nœuds dans l'arborescence.

J'ai déjà écrit la fonction JS qui détermine si un nœud existe dans l'arborescence. Ce que je veux, c'est colorier le nœud que l'utilisateur a recherché. Comment puis-je faire ceci??

Answer 1

Utilisez CSS et changez le className en Javascript. Donc disons que tes noeuds sont des divs. Lorsque vous trouvez le nœud, en Javascript, vous feriez quelque chose comme:

divFoundNode.className = "selected"; 

faire alors que votre CSS a une classe sélectionnée avec un jeu de couleurs d'arrière-plan. Cela ressemblerait à quelque chose comme ceci:

.selected {background-color:red;} /* whatever your selected color is here */ 

Si vous ne souhaitez pas utiliser CSS, vous pouvez changer la couleur du noeud directement en faisant quelque chose comme ceci:

divFoundNode.style.backgroundColor = "red"; 

Maintenant, vous Il faudra probablement désactiver la sélection de tout autre nœud précédemment sélectionné en premier. Pour ce faire, vous avez quelques options. Vous pouvez parcourir tous les nœuds et supprimer la couleur avant de définir la couleur sélectionnée (comme ci-dessus) ou vous pouvez stocker une variable dans votre Javascript avec la dernière div sélectionnée et juste cibler celle-ci. Donc, vous feriez quelque chose comme ceci:

var divLastFoundNode; //global variable 

function treeView_SelectNode(divFoundNode) 
{ 
    divLastFoundNode.className = ""; 
    divFoundNode.className = "selected"; 
    divLastFoundNode = divFoundNode; 
} 

JQuery rendrait cela un peu plus facile. Vous pouvez sélectionner plusieurs noeuds et effectuer des opérations sur chacun d'eux en même temps. Par exemple:

$("div.node").removeClass("selected"); 
$(divFoundNode).addClass("selected"); 

Answer 2

Difficile à dire sans code, mais qu'en est-il de cela?

document.getElementById("foundnodeid").style.color="#abcdef";

Même si je préfère changer la classe que la couleur directement, mais c'est à vous:

document.getElementById("foundnodeid").style.class="classwithdifferentcolor";