js--easyUI--EasyUI的datagrid自适应高度

我遇到的问题是，我的数据列表中有图片，但图片的加载顺序是滞后的。easyUI 在渲染datagrid时，图片还没有加载，

这时如果column中没有设定自己的显示样式，easyUI就会使用自己的默认样式，行高度默认为：22px；

列表数据渲染完成后，采取加载图片，这时图片的高度为：50px；导致正行数据的高度都被撑大到50px；而easyUI不会重新计算

高度，导致高度不能自适应；如图：



解决方法：

var column = [

{title:'ID',field:'id',width:100,align:'left'},

{title:'选手ID',field:'userId',width:100,align:'left'},

{title:'选手昵称',field:'nickName',width:100,align:'left',

formatter:function(data){

if(data == 'null'){

return "";

}else{

return data;

}

}

},

{title:'照片',field:'photoNew',width:60,align:'left',

formatter:function(data){

return "<span style='display:inline-block;height:60px;line-height:3px;'><img src='" + data + "' width='50' heigth='50'></img></span>";

}

},

{title:'所在房间ID',field:'roomId',width:100,align:'left'},

{title:'参加活动',field:'eventName',width:150,align:'left'},

{title:'照片审核状态',field:'photoStatus',width:80,align:'left',

formatter:function(data){

if(data == "0"){

return "<span style='color:green'>审核通过</span>";

}else if(data == "-1"){

return "<span style='color:red'>审核未通过</span>";

}else{

return "未审核";

}

}

},

{title:'分区编号',field:'areaNo',width:80,align:'left',hidden:true},

{title:'晋级级别',field:'levelName',width:80,align:'left'},

{title:'晋级',field:'Progress',width:100,align:'center',

formatter:function(value){

var list = [{iconClass: "icon-ok", jsFunction: "eventPlayer.goUpLevel()", title: "晋级"}];

return $tableHandle(list);

}

}

];

设定一个块元素，将图片需要的大致区域撑起来，这样，easyUI在初始化的时候，就会计算正确了！

总结：

出现原因：有些字段数据是初始化之后才加载完成的。数据高度在初始化前后有明显变化，导致easyUI计算错误。

解决方法，将这些问题字段进行formatter:function(data){},将数据高度提前设置好，在初始时，easyUI就会

计算正常，就不会高度不适应了

====================================================================================================================================

其他解决办法：

datagrid列高，宽自适应：fitColumns:true，

使用fitColumns:true属性，可以解决高度自适应问题，但随之而来的是宽度也自适应了，

这时，列宽显示就会有些问题了。