项目实践——谷歌中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中数据回显亦不会出现问题!


评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值