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

原创 2013年12月04日 19:25:57

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

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

相关文章推荐

easy ui datagrid的高度自适应

使用jquery easy ui 的datagird  发现高度没办法自适应 于是自己使用了一些比较笨的方法 不知道大家有没有好一点的方法 大家可以互相学习一下 1、easyui里面有一个resiz...

easyui layout 解决datagrid 自适应高度

最近使用easyui layout,解决了很多问题,特别是解决datagrid分页栏自适应的问题。先看下效果图,下图中的datagrid随着窗口变化而变化。 中间(搜索条件+datagrid)布局代...

easyUI 的datagrid的自适应布局(一)

昨天调试datagrid的页面自适应,有些东西想要和大家分享一下。 自适应(ResponsiveWeb Design),我的简单理解:是自动识别屏幕的宽度,然后自动调节。相了解更深,可以网上百度。 先...

easyui datagrid 宽度高度自适应

一般情况下,只需要给datagrid加上 fit="true" 就行了, 如果在datagrid的外层有一层div ,那么就要给div加上class="easyui-panel" ,同时加上 fit...

easyUI中datagrid的高度获取

问题:easyui中的datagrid,想要生成合适的高度(自适应),并且不会出现侧边滚动条。 解决思路一:onLoadSuccess:function() { var heightCount...
  • CDWLX
  • CDWLX
  • 2017年03月30日 15:18
  • 1712

easyUI 设置datagrid的行高 + 文字超宽换行

因为datagrid中没有专门设置行高的属性,所以这里通过修改 easyui.css 样式格式来修改行高。 方法:在 easyui.css中搜索“.datagrid-row”属性,将默认的 行高 ...
  • hlbt0112
  • hlbt0112
  • 2016年09月26日 13:29
  • 10035

EasyUI中iframe嵌入页面,包含datagrid数据动态绑定,页面内容的高度自适应问题

在我起初定义的tabs中,我想点击链接后跳出我的datagrid页面,涉及到datagrid的定义,数据的绑定,还有页面的适应高度问题....

easyUI datagrid 列宽自适应(简单 图解)

响应数据格式: easyUI在html代码中结构: 发现了什么没有,我们的表头其实是一个td在td中有一个属性field那么我们就可以获得了; 以下就是自适应代码: //添加事件 ...

easyui datagrid自适应浏览器宽度

在使用easyui的datagrid时,需要考虑到浏览器不同的像素问题,所以,在使用时,我们需要自己写一个函数 code: [javascript] view plai...

Easyui笔记3:实现combobox下拉框高度自适应

最近项目中正在使用easyui。前端的坑真的是太多了,本系列文章会记录我在easyui使用中淌过的坑,用于经验分享以及日后查阅。欢迎转载,转载请注明出处,谢谢~(作者:Colton_Null)如何实现...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js--easyUI--EasyUI的datagrid自适应高度
举报原因:
原因补充:

(最多只允许输入30个字)