easyui treegrid 异步加载

主要通过控制onBeforeExpand和onClickRow事件来实现

1 这里每次只加载一个层级的数据。初始化时，默认树节点的状态是closed

2 通过点击事件（onClickRow）获取下一层级树节点，如果有子节点，则append到当前节点；如果没有子节点则设置当前节点为叶子。需要注意的是append方法执行时，还会调用loadFilter，对数据进行过滤。

3 有一个缺陷是，第一次加载子节点时，只能通过点击行来触发，不能通过点击展开图标触发；第二次及以后能正常

<table id="tt" style="width:600px;height:400px"></table>

<script type="text/javascript">

$(function(){
	
	$('#tt').treegrid({
	    url:'../show/dictByPid',
	    queryParams:{
	    	"pid": 0
	    },
	    idField:'id',
	    treeField:'name',
	    loadFilter: function(data){
	    	var rows = data.content;
	    	for(var i=0; i<rows.length; ++i){
	    		rows[i].state = 'closed';
	    	}
	    	return rows;
	    },
	    columns:[[
			{title:'name',field:'name',width:180},
			{field:'title',title:'title',width:60,align:'right'},
			{field:'remark',title:'remark',width:80}
	    ]],
	    onBeforeExpand: function(row){
	    	if("closed" == row.state && !row.children){
	    		return false;
	    	}
	    },
	    onClickRow: function(row){
	    	if("closed" == row.state && !row.children){
	    		$.ajax({
	    			url:"../show/dictByPid",
	    			data:{
	    				"pid": row.id
	    			},
	    			success: function(data){
	    				var rows = data.content;
	    				if(rows && rows.length>0){
	    					$('#tt').treegrid("append", {
		    					parent: row.id,
		    					data: data
		    				});
		    				row.state = 'open';
	    				}else{
	    					row.state = 'open';
	    				}
	    				$('#tt').treegrid("refresh", row.id);
	    			},
	    			dataType:'json'
	    		});
	    	}
	    }
	});
});

</script>

如果treegrid用的分页，则需要注意，异步加载的子节点不能分页，即append事件触发的loadFilters过滤的数据格式，不包含total和rows

在onClickRow的ajax请求中处理下数据，譬如，这里去掉了total属性

                if(rows && rows.length>0){  
                        $('#tt').treegrid("append", {  
                        parent: row.id,  
                        data: {
                        	"code": data.code,
                        	"content": data.content.rows
                        }  
                    });  
                } 

然后在loadFilters对第一次加载的数据和后续append的数据区别对待

                if(data.content.hasOwnProperty("total")){
	    			var rows = data.content.rows;
		    		for(var i=0; i<rows.length; ++i){
		    			rows[i]['state'] = 'closed';//初始化时，默认所有节点都有子节点
		    		}
		    		//加载根节点数据，分页处理
		    		var msg = {"total":data.content.total,"rows":rows};
					return msg;
	    		}else{
	    			var rows = data.content;
	    			for(var i=0; i<rows.length; ++i){
		    			rows[i]['state'] = 'closed';//初始化时，默认所有节点都有子节点
		    		}
	    			//异步加载子节点，不包含total和rows属性
	    			return rows;
	    		}