jQuery MiniUI

标题: 请问嵌套在tabs中的grid怎样撑满全屏？ [打印本页]
作者: purple_icer    时间: 2013-5-14 14:09:59     标题: 请问嵌套在tabs中的grid怎样撑满全屏？

本帖最后由 purple_icer 于 2013-5-14 14:11 编辑

正常表格增加<div class="mini-fit" >后，是正常的
但是将表格放到tabs中，就显示不出表格了，不知道为什么？
代码这样写，表格就显示不出来了：
<div class="mini-fit" >            <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;"
                url="./AjaxService.jsp?method=SearchEmployees" idField="id"
[attach]1870[/attach]

作者: factory    时间: 2013-5-14 14:17:21

你这个是tabs下面的表格页面是直接到tab下的还是url加载的

mini-fit是计算页面的剩余高度，所以如果是url加载的一个单独页面的话，请设置html,body{height:100%;}。
作者: purple_icer    时间: 2013-5-14 14:27:23

factory 发表于 2013-5-14 14:17
你这个是tabs下面的表格页面是直接到tab下的还是url加载的

mini-fit是计算页面的剩余高度，所以如果是url ...

是直接放到tabs下的,url只负责得到表格内的行内容
<div class="mini-tabs" id="tabs1">
   <div id="toolbar">
   </div>
   <div id="mini-fit">
   <div id="grid">
   </div>
   </div>
</div>
作者: factory    时间: 2013-5-14 14:32:36

purple_icer 发表于 2013-5-14 14:27
是直接放到tabs下的,url只负责得到表格内的行内容

   

[attach]1871[/attach]

  1. <div id="tabs1" class="mini-tabs" activeIndex="0" style="width:850px;height:500px;" plain="false">
  2.     <div title="Tab2" iconCls="icon-cut" >
  3.         <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
  4.             <table style="width:100%;">
  5.                 <tr>
  6.                     <td style="width:100%;">
  7.                         <a class="mini-button" iconCls="icon-add" onclick="addRow()" plain="true">增加</a>
  8.                         <a class="mini-button" iconCls="icon-remove" onclick="removeRow()" plain="true">删除</a>
  9.                         <span class="separator"></span>
  10.                         <a class="mini-button" iconCls="icon-save" onclick="saveData()" plain="true">保存</a>  
  11.                         <span class="separator"></span>
  12.                         <a class="mini-button" iconCls="icon-print" onclick="print()" plain="true">打印1</a>
  13.                         <a class="mini-button" iconCls="icon-print" onclick="print2()" plain="true">打印2</a>            
  14.                     </td>
  15.                     <td style="white-space:nowrap;">
  16.                         <input id="key" class="mini-textbox" emptyText="请输入姓名" style="width:150px;" onenter="onKeyEnter"/>   
  17.                         <a class="mini-button" onclick="search()">查询</a>
  18.                     </td>
  19.                 </tr>
  20.             </table>           
  21.         </div>
  22.         <div class="mini-fit">
  23.             <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;"
  24.                   idField="id"
  25.                 sizeList="[5,10,20,50]" pageSize="10"
  26.             >
  27.                 <div property="columns">
  28.                     <div type="indexcolumn" ></div>
  29.                     <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>   
  30.                     <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>                           
  31.                     <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
  32.                     <div field="salary" width="100" allowSort="true">薪资</div>                                    
  33.                     <div field="age" width="100" allowSort="true">年龄</div>
  34.                     <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>               
  35.                 </div>
  36.             </div>
  37.         </div>
  38.     </div>
  39.     <div title="Tab3" showCloseButton="true">
  40.         3
  41.     </div>
  42.     <div title="Tab4" showCloseButton="true" enabled="false">
  43.         4
  44.     </div>
  45. </div>
复制代码

测试了下，是好的，你看下我的代码

作者: purple_icer    时间: 2013-5-15 08:59:03

factory 发表于 2013-5-14 14:32
测试了下，是好的，你看下我的代码

找到原因了，我在最外层的div里设置height:auto;就会出现错误，谢谢



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2