Nœuds de chargement paresseux de la grille d'arborescence jEasyUI

Parfois, nous disposons de suffisamment de données de grille arborescente hiérarchique (TreeGrid). Nous souhaitons également que TreeGrid charge paresseusement les nœuds de manière hiérarchique. Premièrement, seuls les nœuds de niveau supérieur sont chargés. Cliquez ensuite sur l'icône de développement du nœud pour charger ses nœuds enfants. Ce tutoriel montre comment créer un TreeGrid avec un chargement paresseux.

Créer un TreeGrid

	<table id="test" title="Folder Browser" class="easyui-treegrid" style="width:700px;height:300px"
			data-options="
				url: 'data/treegrid_data.json',
				method: 'get',
				rownumbers: true,
				idField: 'id',
				treeField: 'name',
				loadFilter: myLoadFilter
			">
		<thead>
			<tr>
				<th field="name" width="220">Name</th>
				<th field="size" width="100" align="right">Size</th>
				<th field="date" width="150">Modified Date</th>
			</tr>
		</thead>
	</table>

Afin de placer les nœuds enfants de chargement, nous devons renommer l'attribut 'children' pour chaque nœud. Comme le montre le code ci-dessous, la propriété « children » est renommée « children1 ». Lorsqu'un nœud est développé, nous appelons la méthode « append » pour charger les données de son nœud enfant.

Code 'loadFilter'

	function myLoadFilter(data,parentId){
		function setData(){
			var todo = [];
			for(var i=0; i<data.length; i++){
				todo.push(data[i]);
			}
			while(todo.length){
				var node = todo.shift();
				if (node.children){
					node.state = 'closed';
					node.children1 = node.children;
					node.children = undefined;
					todo = todo.concat(node.children1);
				}
			}
		}
		
		setData(data);
		var tg = $(this);
		var opts = tg.treegrid('options');
		opts.onBeforeExpand = function(row){
			if (row.children1){
				tg.treegrid('append',{
					parent: row[opts.idField],
					data: row.children1
				});
				row.children1 = undefined;
				tg.treegrid('expand', row[opts.idField]);
			}
			return row.children1 == undefined;
		};
		return data;
	}

Télécharger l'instance jQuery EasyUI

jeasyui-tree-treegrid5.zip