grid pepohon jEasyUI malas memuatkan nod

Kadangkala kami mempunyai data grid pokok hierarki (TreeGrid) yang mencukupi. Kami juga mahu TreeGrid memuatkan nod secara hierarki dengan malas. Pertama, hanya nod peringkat atas dimuatkan. Kemudian klik ikon kembangkan nod untuk memuatkan nod anaknya. Tutorial ini menunjukkan cara membuat TreeGrid dengan pemuatan malas.

Buat 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>

Untuk meletakkan loading child nod, kita perlu menamakan semula atribut 'children' untuk setiap nod. Seperti yang ditunjukkan dalam kod di bawah, sifat 'kanak-kanak' dinamakan semula kepada 'kanak-kanak1'. Apabila nod dikembangkan, kami memanggil kaedah 'tambah' untuk memuatkan data nod anaknya.

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

Muat turun contoh jQuery EasyUI

jeasyui-tree-treegrid5.zip