Le menu de l'arborescence jEasyUI charge les nœuds parent/enfant

Habituellement, la façon de représenter un nœud d'arbre est de stocker un identifiant parent dans chaque nœud. Ceci est également connu sous le nom de modèle de liste de contiguïté. Le chargement direct de ces données dans le menu arborescent (Tree) n'est pas autorisé. Mais nous pouvons convertir le menu arborescent au format de données du menu arborescent standard (Tree) avant de le charger. Le plug-in Tree fournit une fonction optionnelle « loadFilter », qui peut implémenter cette fonction. Il offre la possibilité de modifier toutes les données entrantes. Ce tutoriel vous montre comment charger des nœuds parent/enfant dans une arborescence à l'aide de la fonction 'loadFilter'.

Données du nœud parent/enfant

	[
	{"id":1,"parendId":0,"name":"Foods"},
	{"id":2,"parentId":1,"name":"Fruits"},
	{"id":3,"parentId":1,"name":"Vegetables"},
	{"id":4,"parentId":2,"name":"apple"},
	{"id":5,"parentId":2,"name":"orange"},
	{"id":6,"parentId":3,"name":"tomato"},
	{"id":7,"parentId":3,"name":"carrot"},
	{"id":8,"parentId":3,"name":"cabbage"},
	{"id":9,"parentId":3,"name":"potato"},
	{"id":10,"parentId":3,"name":"lettuce"}
	]

Utilisez 'loadFilter' pour créer un menu arborescent (Tree)

	$('#tt').tree({
		url: 'data/tree6_data.json',
		loadFilter: function(rows){
			return convert(rows);
		}
	});

Implémentation de la conversion

	function convert(rows){
		function exists(rows, parentId){
			for(var i=0; i<rows.length; i++){
				if (rows[i].id == parentId) return true;
			}
			return false;
		}
		
		var nodes = [];
		// get the top level nodes
		for(var i=0; i<rows.length; i++){
			var row = rows[i];
			if (!exists(rows, row.parentId)){
				nodes.push({
					id:row.id,
					text:row.name
				});
			}
		}
		
		var toDo = [];
		for(var i=0; i<nodes.length; i++){
			toDo.push(nodes[i]);
		}
		while(toDo.length){
			var node = toDo.shift();	// the parent node
			// get the children nodes
			for(var i=0; i<rows.length; i++){
				var row = rows[i];
				if (row.parentId == node.id){
					var child = {id:row.id,text:row.name};
					if (node.children){
						node.children.push(child);
					} else {
						node.children = [child];
					}
					toDo.push(child);
				}
			}
		}
		return nodes;
	}

Télécharger Exemple jQuery EasyUI

jeasyui-tree-tree6.zip