jEasyUI 트리 그리드 지연 로딩 노드

때로는 계층적 트리 그리드(TreeGrid) 데이터가 충분할 때가 있습니다. 또한 TreeGrid가 노드를 계층적으로 지연 로드하기를 원합니다. 먼저 최상위 노드만 로드됩니다. 그런 다음 노드의 확장 아이콘을 클릭하여 하위 노드를 로드합니다. 이 튜토리얼에서는 지연 로딩을 사용하여 TreeGrid를 만드는 방법을 보여줍니다.

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>

로드 중인 하위 노드를 배치하려면 각 노드의 'children' 속성 이름을 바꿔야 합니다. 아래 코드와 같이 'children' 속성의 이름이 'children1'로 변경되었습니다. 노드가 확장되면 'append' 메소드를 호출하여 하위 노드 데이터를 로드합니다.

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

jQuery EasyUI 예제 다운로드

jeasyui-tree-treegrid5.zip