jQuery MiniUI

标题: 求问关于datagrid自适应高度 [打印本页]

作者: bamboo0502 时间: 2014-9-3 10:52:38 标题: 求问关于datagrid自适应高度

我看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>

作者: bamboo0502 时间: 2014-9-3 11:11:59

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

作者: dforce 时间: 2014-9-3 11:37:14

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

请提供html页面详细说明

作者: bamboo0502 时间: 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 时间: 2014-9-3 13:02:49

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

html, body{

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

作者: bamboo0502 时间: 2014-9-3 13:05:06

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

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

作者: dforce 时间: 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 时间: 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 时间: 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 时间: 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(){})

作者: bamboo0502 时间: 2014-9-3 14:12:56

dforce 发表于 2014-9-3 13:46
你grid高度到底是要自适应还是撑满mini-fit
撑满就设置height:100%

嗯，我现在grid.on('update')事件控制，但是又有个问题，我从其他tab页面切换回来后高度又乱了，请问从其他页面切换回当前页面的话，当前页面的grid会触发什么事件么？

作者: dforce 时间: 2014-9-3 15:38:18

bamboo0502 发表于 2014-9-3 14:12
嗯，我现在grid.on('update')事件控制，但是又有个问题，我从其他tab页面切换回来后高度又乱了，请问从其 ...

监听tab切换事件tabs.on("activechanged",function(){
mini.layout();
})

作者: bamboo0502 时间: 2014-9-3 17:59:50

本帖最后由 bamboo0502 于 2014-9-3 18:37 编辑

dforce 发表于 2014-9-3 15:38
监听tab切换事件tabs.on("activechanged",function(){
mini.layout();
})

好像tab页内容加载时监听不到啊
奇怪了，切换tab的时候mini-fit里面的mini-grid-viewport的高度自动变成了auto？

作者: felt 时间: 2014-9-4 09:45:45

bamboo0502 发表于 2014-9-3 17:59
好像tab页内容加载时监听不到啊
奇怪了，切换tab的时候mini-fit里面的mini-grid-viewport的高度自动变成了 ...

activechanged是tab里面面板切换的事件
我实在是不明白你的布局了，有问题有整个页面打包上来，高级模式可以上传文件

作者: bamboo0502 时间: 2014-9-4 12:52:52

felt 发表于 2014-9-4 09:45
activechanged是tab里面面板切换的事件
我实在是不明白你的布局了，有问题有整个页面打包上来，高级模式 ...

已经通过js调好了，tab切换时调用子页面的一个自调整函数来重新设置datagrid的高度

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)