Arborescence ( à niveaux quasi illimité ) de checkbox avec logique coche/décoche

Commenter

Contenu du snippet

Arborescence de checkbox ( Ver 1 ) à niveaux quasi illimité.
Permettant de cocher et décocher intuitivement.

Source / Exemple : 


<html>
<head>
<script>

// ********************************************************************* //
// Ce script permet de construire une arborescence ( à niveaux quasi-illimité ) 
// de checkbox avec logique intuitive de coche/décoche.
//
// Il prend en entrée un tableau représentant l' (ou les) arbre(s) (voir ci-dessous )
// 				     
//				      
// ******************************************************************** //

var Itree=new Array("check1,check2,check3","check3,check4,check5","check5,check6,check7,check8","check8,check9");

// Itree représente un arbre. Cet arbre est représenté par un ensemble d'éléments.
// Ici:
// "check1,check2,check3" est un élément.
// "check3,check4,check5" est un autre élément.
//
// Chaque élement se structure ainsi: Les noeuds sont séparé par des virgules.
// 				      Le premier noeud correspond a un noeud quelconque de l'arbre.
//				      Les noeud suivants correspondent à ses fils directs.

// Exemple pour Itree:
// "check1,check2,check3" : signifie que check1 est le pére direct de check2,check3.
// "check3,check4,check5" : signifie que check3 est le pére direct de check4,check5.
//
// Les noms check1,check2 ... représente les ID des checkbox.

// Attention: il faut veiller à ne pas mettre de cycle !
//	     Exemple: ("check1,check2","check2,check1")

// Exemple: On peut représenter l'arbre :
//
//  -- check1
//     	  --- check3
//   	  --- check2
//               ------ check4
//               ------ check5
// Par
// ("check1,check2,check3","check2,check4,check5");

// ***************** Fonctions de gestion d'un arbre ****************

// ======================= Obtenir les fils directs =================
// ==================================================================

	function getDirectChilds( graph , node )
	{
		var childs = new Array();

		for( i = 0; i<graph.length; i++)
		{

			var tabNodes = graph[i].split(",");		

			if( node == tabNodes[0] )
			{
				for( j = 1; j<tabNodes.length; j++)
				{
					childs.push(tabNodes[j]);				
				}
			} // On  est possible de mettre un "return childs" ici. 
                          // (Les autres noeuds ne seront pas traités)

		}
		
		return childs;
	}
	

// ================ Obtenir tous les fils ( récursivement ) =========
// ==================================================================

	function getChilds ( graph , node )
	{
		var childs = getDirectChilds( graph, node );
		var allChilds = new Array();

		if(childs.length>0)
		{
			for(var i = 0; i < childs.length; i++)
			{
				allChilds = allChilds.concat(getChilds( graph , childs[i] ));
				
			}
		}
		return childs.concat(allChilds);
	}

// ==================== Obtenir le parent d'un noeud ================
// ==================================================================

	function getDirectParent( graph , node )
	{
		for( var i = 0; i <graph.length;i++)
		{
			var tabNodes = graph[i].split(",");
			for( var j = 1; j < tabNodes.length; j++)	
			{
				if(tabNodes[j]==node) return tabNodes[0];
			}
		}	
		return "";
	}

// ============= Obtenir tous les parents (récursivement) ===========
// ==================================================================

	function getParents( graph , node )
	{
		var parent = new Array();
		var node  = getDirectParent(graph,node);
		if(node!="")
		{
			parent.push(node);
			parent = parent.concat(getParents(graph,node));
		}
		return parent;
		
	}

// *********************** Fonctions pour les checkbox **************

	
// ==== Coche le noeud parent si tous les fils sont cochés ==========
// ==================================================================

	function doCheckParent ( graph, nodeId)	
	{
		if(nodeId != "")
		{
			var childs = getDirectChilds( graph, nodeId );
			for(var i=0;i<childs.length;i++)
			{
				if(document.getElementById(childs[i]).checked == false) return;
			}
			document.getElementById(nodeId).checked=true;
			doCheckParent( graph, getDirectParent( graph , nodeId)) ;
		}
	}

// =============== Coche tous les fils du noeud =====================
// ==================================================================

	function doCheck( graph, nodeId )
	{
		var childs = getChilds( graph, nodeId );
		var parent = getDirectParent ( graph , nodeId);
		for (var i = 0; i<childs.length; i++)
		{
			document.getElementById(childs[i]).checked=true;
		}
		doCheckParent( graph , parent );
	}
	

// ======== Décoche tous les fils et tout les noeuds parents =======
// ==================================================================

	function doUncheck( graph, nodeId )
	{
		var childs = getChilds( graph, nodeId );
		var parents = getParents( graph, nodeId );

		for (var i = 0; i<childs.length; i++)
		{
			document.getElementById(childs[i]).checked=false;
		}
		for (var i = 0; i<parents.length; i++)
		{
			document.getElementById(parents[i]).checked=false;
		}		
			
	}

// ====== Fonction principale: coche si pas coché sinon décoche =====
// ==================================================================

	function doEvent( graph , nodeId )
	{
		node = document.getElementById(nodeId);
		if(node != null)
		{
			if(node.checked) doCheck( graph, nodeId );
			else doUncheck( graph,  nodeId );
		}
	}

</script>
</head>
<body>

<input type="checkbox" name="checkboxes" id="check1" onClick="doEvent( Itree ,'check1')"/><b>Tous mes disques</b><br />

&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check2" onClick="doEvent( Itree ,'check2')"/>Disques 2007<br />

&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check3" onClick="doEvent( Itree ,'check3')"/><b><i>Disques < 2007</i></b><br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check4" onClick="doEvent( Itree ,'check4')" />Disques 2006<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check5" onClick="doEvent( Itree ,'check5')"/><b><i>Disques < 2006</i></b><br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check6" onClick="doEvent( Itree ,'check6')"/>Disque 2004<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check7" onClick="doEvent( Itree ,'check7')"/>Disque 2003<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check8" onClick="doEvent( Itree ,'check8')"/><b><i>Disques < 2003</i></b><br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="checkboxes" id="check9" onClick="doEvent( Itree ,'check9')"/>Disque 2001<br />

</body>
</html>

Conclusion :


Mise en place:
On renseigne un (ou des) tableau(x) (Array) représentant(s) l'arborescence. On ajoute un event onClick sur les checkbox avec le nom du tableau + l'id de la checkbox.

Compatible avec la plupart des navigateurs ( une seule méthode utilisée getElementById() (norme W3C) ).

Note: On peut utiliser plusieurs arbres ou n'en utiliser qu'un (ce qui est tout aussi efficace car les ID sont uniques).
Seulement pour certains cas pratiques et notamment pour une utilisation avec des pages dynamiques il est plus simple d'en utiliser plusieurs.

Note 2: Pour être tout a fait propre dans le code on peut ajouter des tests "!=null" lors des appels getElementById
Il est également possible d'intégrer une détection de cycle. A vous d'imaginer...

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Grafiii)