项目实践——谷歌中easyui的tree解析与火狐的异同

　　上一篇，讲了Easyui的Tree，在火狐下显示没有任何问题，但是在谷歌中，出现了一个小问题，导致tree的数据回显出现异常。这是因为谷歌中对tree的解析是放在了页面加载完之后进行的tree解析，也就是说：回显数据准备好了，但是tree没有呢！而火狐中，则是解析完tree，异步准备的数据才准备完毕，页面大概才加载完毕，所以想要easui的tree通用，必须这样写

var userId = '' ;
//easyui全选
function checkALL(){
	
	 var roots = $('#tree').tree('getRoots');
	  for(var i=0;i<roots.length;i++){
		  var node=$('#tree').tree('find',roots[i].id);
		  $('#tree').tree('check', node.target);
	  }
}
//easyui全不选
function uncheckALL(){
	
	 var roots = $('#tree').tree('getRoots');
	  for(var i=0;i<roots.length;i++){
		  var node=$('#tree').tree('find',roots[i].id);
		  $('#tree').tree('uncheck', node.target);
	  }
}

//页面加载
onload = function(){
	
	//获取所有的菜单信息，并用treegrid进行过滤
	$('#tree').tree({
		url : getRootPath()+'/user/roleListTree.do',	
		lines:true,
		checkbox:"true",
		loadFilter : function(rows) {
			return convert(rows);
		},
		<span style="color:#ff0000;"><strong>onLoadSuccess:function()</strong></span><strong>{//在树加载成功之后，再进行准备回显数据（如果不这样的话，在谷歌中可能会出现问题）</strong>
		          var data=getIndexContentWindow().gridRowData;
		     if(data!=null){
		     	userId = getIndexContentWindow().gridRowData["id"];	
		     }	
			//准备角色回显数据
			$.ajax({
				type: "POST",
				async: false,
				url: getRootPath()+"/user/getUserRolesByUserId.do",
				data:{
					userId: userId
				} ,
				dataType: "json",
				success: function(data){
					
					//获取返回的值
					 var arrs=data;			
					 uncheckALL();
					 nodeids=[];
					 //如果角色nodelist不为空
					 if(arrs.length>0){
						 for(var i=0;i<arrs.length;i++){	
							//根据节点Id获取节点
							var node = $('#tree').tree('find', arrs[i].roleid);
							var childrens= $('#tree').tree('getChildren', node.target);
						    if(childrens.length==0){
						    	 $('#tree').tree('check', node.target);							 
						    }
						    nodeids.push(arrs[i].id);
						 }
					 }
			 
				}
			});
			
			$.ajax({
				type: "POST",
				async: false,
				url: getRootPath()+"/user/getUserDepartmentByUserId.do;",
				data:{
					userId: userId
				} ,
				dataType: "json",
				success: function(data){
					 var arrs=data;			
					 nodeids=[];
					 if(arrs.length>0){		
						 $('#cuserdepartment').combobox('setValue',arrs[0].deptid);
				} 
				}
			});
			
		}
		
	});
	
	
	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 = [];
		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();
			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;
	}

　　和原先的区别在与在Tree的onLoadSuccess事件之后再准备回显数据，这样在谷歌中IE中数据回显亦不会出现问题！