关闭

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

1970人阅读 评论(0) 收藏 举报
分类:

我遇到的问题是,我的数据列表中有图片,但图片的加载顺序是滞后的。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属性,可以解决高度自适应问题,但随之而来的是宽度也自适应了,

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:347041次
    • 积分:4429
    • 等级:
    • 排名:第6751名
    • 原创:87篇
    • 转载:145篇
    • 译文:0篇
    • 评论:17条
    最新评论