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属性,可以解决高度自适应问题,但随之而来的是宽度也自适应了,

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

绿竹痕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值