上一篇,讲了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中数据回显亦不会出现问题!