查看: 9633|回复: 14

求问关于datagrid自适应高度 [复制链接]

bamboo0502

注册会员

Rank: 2

电梯直达

楼主

发表于 2014-9-3 10:52:38 |只看该作者 |倒序浏览

我看demo上datagrid组件是自适应高度的，但是我拷贝代码至我的页面时发现datagrid的高度超出了父元素的高度
比如<div class="mini-fit">的高度自适应出来是300px，但是里面<div class="mini-panel mini-grid mini-datagrid">的高度却因为数据太多的原因自适应为800px？
我的代码如下
<div class="mini-fit">
<div id="datagrid1" class="mini-datagrid" style="width:100%;"
      url="xxxxx" idField="key" allowResize="false"
      sizeList="[20,30,50]" pageSize="30" multiSelect="false"
      onselect="onSelect">
>
xxxxx
</div>
</div>

收藏0

bamboo0502

注册会员

Rank: 2

沙发

发表于 2014-9-3 11:11:59 |只看该作者

即使手工给datagrid设置高度也不起作用

dforce

超级版主

Rank: 8 Rank: 8

板凳

发表于 2014-9-3 11:37:14 |只看该作者

bamboo0502 发表于 2014-9-3 11:11
即使手工给datagrid设置高度也不起作用

请提供html页面详细说明

bamboo0502

注册会员

Rank: 2

地板

发表于 2014-9-3 11:50:07 |只看该作者

dforce 发表于 2014-9-3 11:37
请提供html页面详细说明

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>xxxx</title>
<style type="text/css">
html, body{
      margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
}

</style>

</head>
<body >
<div style="width:100%;">
      <div class="mini-toolbar">
         <table style="width:100%;">
            <tr>
                  <td style="width:100%;">
                        <a class="mini-button">按钮A</a>
                        <a class="mini-button">按钮B</a>
                  </td>
            </tr>
         </table>
      </div>
      <div class="mini-fit" style="width:100%;height:100%;">
            <div id="datagrid1" class="mini-datagrid" style="width:100%;" ondrawcell="onDrawCell"
      url="xxxxxxxxx" idField="id"  allowResize="false" sizeList="[20,30,50]"
                  pageSize="20" onselect="onSelect" ondeselect="onDeselect" onload="onLoad">
>
                  <div property="columns"></div>
            </div>
      </div>
</div>
</body>
</html>

dforce

超级版主

Rank: 8 Rank: 8

5^#

发表于 2014-9-3 13:02:49 |只看该作者

bamboo0502 发表于 2014-9-3 11:50
xxxx

html, body{

mini-fit根据父元素计算高度
你的mini-fit的父元素div没高度

bamboo0502

注册会员

Rank: 2

6^#

发表于 2014-9-3 13:05:06 |只看该作者

dforce 发表于 2014-9-3 13:02
mini-fit根据父元素计算高度
你的mini-fit的父元素div没高度

现在mini-fit的高度是自适应的啊

dforce

超级版主

Rank: 8 Rank: 8

7^#

发表于 2014-9-3 13:08:44 |只看该作者

bamboo0502 发表于 2014-9-3 13:05
现在mini-fit的高度是自适应的啊

mini-fit是根据父元素撑满剩余高度，不是你想的自适应
你这个mini-fit父元素<div style="width:100%;">只有宽度，没有高度
mini-fit计算出来的高度就是0

bamboo0502

注册会员

Rank: 2

8^#

发表于 2014-9-3 13:29:18 |只看该作者

dforce 发表于 2014-9-3 13:08
mini-fit是根据父元素撑满剩余高度，不是你想的自适应
你这个mini-fit父元素只有宽度，没有高度
mini-fit ...

ok，我现在在mini-fit的外面加了一个<div style="height:400px">，结果是datagrid的高度依旧超过了400啊，我要的是datagrid的高度等于mini-fit的高度，且mini-grid-rows的高度为datagrid的高度减去mini-grid-columns和mini-grid-pager的高度

bamboo0502

注册会员

Rank: 2

9^#

发表于 2014-9-3 13:41:28 |只看该作者

dforce 发表于 2014-9-3 13:08
mini-fit是根据父元素撑满剩余高度，不是你想的自适应
你这个mini-fit父元素只有宽度，没有高度
mini-fit ...

我现在用js手工设置高度：
grid.load(null,function(){
     var height1 = $(".mini-fit").height()-2;
     $(".mini-grid-viewport").css('height',height1+'px');
     var height2 = height1 - $(".mini-grid-columns").height() - $(".mini-grid-pager").height() - 20;
     $(".mini-grid-rows").css('height',height2+'px');
     });
可以达到效果，但是如果我改变每页显示条数，这段就不执行了，所以不能动态实时调整高度

dforce

超级版主

Rank: 8 Rank: 8

10^#

发表于 2014-9-3 13:46:05 |只看该作者

bamboo0502 发表于 2014-9-3 13:41
我现在用js手工设置高度：
grid.load(null,function(){
var height1 = $(".mini-fit").height()-2 ...

你grid高度到底是要自适应还是撑满mini-fit
撑满就设置height:100%

另外grid.load(nuill,function(){})只在初次加载的时候触发
每次加载触发是grid.on("load",function(){})

12 下一页

返回列表

		自动登录	找回密码
密码			立即注册