jQuery MiniUI

标题: 紧急紧急！关于复杂页面布局表格自适应宽高的问题！ [打印本页]
作者: zhaolq    时间: 2016-8-4 20:11:58     标题: 紧急紧急！关于复杂页面布局表格自适应宽高的问题！

页面需求为第一行为滚动新闻去，下面左侧三行分别放入三个表格，右侧一行放入表单，现需要左侧三个表格，能按照33%、33%、34%的方式去自适应高度，大致需要的效果如下：[attach]7737[/attach]
但是试了几种布局方式效果都不理想，主要想使用table布局的方式，采用百分比的方式来划分(并且表格的外层也加入了mini-fit)，并使得表格能自适应屏幕大小调整宽高，是不是有什么问题，或者有什么更好的布局方式可以推荐，代码如下：
  1. <%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK" %>
  2. <%@ include file="/tbp/page/taglibsCommon.jspf"%>
  3. <%@ page import="tbp.component.sys.Constants"%>
  4. <%@ page isELIgnored="false"%>  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <%
  7. String root = request.getContextPath();
  8. //System.out.println(root);
  9. request.setAttribute("root", root);

  11. %>
  12. <html>
  13. <head>
  14. <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
  15. <title>工单创建</title>
  16. <script src="${root}/miniui/boot.js" type="text/javascript" ></script>
  17. <style type="text/css">
  18.     html, body{
  19.         margin:0;padding:0;border:0;width:100%;height:100%;overflow:hidden;
  20.     }   
  21. </style>
  22. </head>
  23. <table width="100%" height="30px">
  24. <tr>
  25.         <td></td>
  26. </tr>
  27. </table>
  28. <div class="mini-fit">
  29. <div class="mini-splitter" style="width:100%;height:100%;" allowResize="false">
  30.     <div size="800px" showCollapseButton="true">
  31.         <table width="100%">
  32.                 <tr>
  33.                         <td>
  34.                                 <div class="mini-fit">
  35.                                     <div style="width:100%;">
  36.                                                 <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
  37.                                                     <table style="width:100%;">
  38.                                                         <tr>
  39.                                                             <td style="width:100%;">
  40.                                                                 <a class="mini-button" iconCls="icon-add" onclick="addRow()" plain="true" tooltip="增加...">增加</a>
  41.                                                                 <a class="mini-button" iconCls="icon-remove" onclick="removeRow()" plain="true">删除</a>
  42.                                                                 <span class="separator"></span>
  43.                                                                 <a class="mini-button" iconCls="icon-save" onclick="saveData()" plain="true">保存</a>            
  44.                                                             </td>
  45.                                                             <td style="white-space:nowrap;">
  46.                                                                 <input id="key" class="mini-textbox" emptyText="请输入姓名" style="width:350px;" onenter="onKeyEnter"/>   
  47.                                                                 <a class="mini-button" onclick="search()">查询</a>
  48.                                                             </td>
  49.                                                         </tr>
  50.                                                     </table>           
  51.                                                 </div>
  52.                                             </div>
  53.                                             <div id="datagrid1" class="mini-datagrid" style="width:100%;height:180px;"
  54.                                                 url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"
  55.                                                 allowResize="true" pageSize="20"
  56.                                                 allowCellEdit="true" allowCellSelect="true" multiSelect="true"
  57.                                                 editNextOnEnterKey="true"  editNextRowCell="true"
  58.                                                 
  59.                                             >
  60.                                                 <div property="columns">
  61.                                                     <div type="indexcolumn"></div>
  62.                                                     <div type="checkcolumn"></div>
  63.                                                     <div name="LoginName"  field="loginname" headerAlign="center" allowSort="true" width="150" >员工帐号
  64.                                                         <input property="editor" class="mini-textbox" style="width:100%;" minWidth="200" />
  65.                                                     </div>
  66.                                                     <div field="age" width="100" allowSort="true" >年龄
  67.                                                         <input property="editor" class="mini-spinner"  minValue="0" maxValue="200" value="25" style="width:100%;"/>
  68.                                                     </div>            
  69.                                                     <div name="birthday" field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
  70.                                                         <input property="editor" class="mini-datepicker" style="width:100%;"/>
  71.                                                     </div>   
  72.                                                     <div field="remarks" width="120" headerAlign="center" allowSort="true">备注
  73.                                                         <input property="editor" class="mini-textarea" style="width:200px;" minWidth="200" minHeight="50"/>
  74.                                                     </div>
  75.                                                     <!--ComboBox：本地数据-->         
  76.                                                     <div type="comboboxcolumn" autoShowPopup="true" name="gender" field="gender" width="100" allowSort="true"  align="center" headerAlign="center">性别
  77.                                                         <input property="editor" class="mini-combobox" style="width:100%;" data="Genders" />               
  78.                                                     </div>
  79.                                                     <!--ComboBox：远程数据-->
  80.                                                     <div type="comboboxcolumn" field="country" width="100" headerAlign="center" >国家
  81.                                                         <input property="editor" class="mini-combobox" style="width:100%;" url="../data/countrys.txt" />               
  82.                                                     </div>   
  83.                                                     <div type="checkboxcolumn" field="married" trueValue="1" falseValue="0" width="60" headerAlign="center">婚否</div>                        
  84.                                                 </div>
  85.                                             </div>
  86.                                             
  87.                                           </div>  
  88.                         </td>
  89.                 </tr>
  90.                 <tr >
  91.                         <td height="150px">
  92.                                 <div class="mini-fit">
  93.                               <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;"
  94.                               url="data/AjaxService.jsp?method=SearchCustomers" idField="id">
  95.                                <div property="columns">
  96.                                    <div field="userid" width="120" headerAlign="center" allowSort="true">员工帐号</div>               
  97.                                    <div field="username" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">用户名</div>            
  98.                                    <div field="useralias" width="100" allowSort="true">别名</div>
  99.                                    <div field="mobilephone" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期</div>                                    
  100.                                    <div field="sex" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>   
  101.                                    <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">操作</div>
  102.                                </div>
  103.                                       </div>                                 
  104.                                 </div>
  105.                         </td>
  106.                 </tr>
  107.                 <tr >
  108.                 <td height="200px">
  109.                   <div class="mini-fit">
  110.                       <div id="datagrid2" class="mini-datagrid" style="width:100%;height:100%;"
  111.                       url="data/AjaxService.jsp?method=SearchCustomers" idField="id">
  112.                        <div property="columns">
  113.                            <div field="userid" width="120" headerAlign="center" allowSort="true">员工帐号</div>               
  114.                            <div field="username" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">用户名</div>            
  115.                            <div field="useralias" width="100" allowSort="true">别名</div>
  116.                            <div field="mobilephone" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期</div>                                    
  117.                            <div field="sex" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>   
  118.                            <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">操作</div>
  119.                        </div>
  120.                               </div>                         
  121.                               </div>       
  122.                 </td>
  123.                 </tr>
  124.         </table>
  125.     </div>
  126.     <div showCollapseButton="true">
  127.         
  128.     </div>      

  130. </div>
  131. </div>

  133. <body>



  137. <script type="text/javascript">
  138.         mini.parse();

  140. </script>

  142. </body>
  143. </html>
复制代码



作者: zhaolq    时间: 2016-8-4 20:14:23

在线等，希望大神们不吝赐教
作者: felt    时间: 2016-8-5 09:38:54

zhaolq 发表于 2016-8-4 20:14
在线等，希望大神们不吝赐教
  1. <table width="100%" height="30px">
  2.         <tr>
  3.             <td>
  4.             </td>
  5.         </tr>
  6.     </table>
  7.     <div class="mini-fit">
  8.         <div class="mini-splitter" style="width: 100%; height: 100%;" allowresize="false">
  9.             <div size="800px" showcollapsebutton="true">
  10.                 <div class="mini-toolbar" style="border-bottom: 0; padding: 0px;">
  11.                     <table style="width: 100%;">
  12.                         <tr>
  13.                             <td style="width: 100%;">
  14.                                 <a class="mini-button" iconcls="icon-add" onclick="addRow()" plain="true" tooltip="增加...">
  15.                                     增加</a> <a class="mini-button" iconcls="icon-remove" onclick="removeRow()" plain="true">
  16.                                         删除</a> <span class="separator"></span><a class="mini-button" iconcls="icon-save"
  17.                                             onclick="saveData()" plain="true">保存</a>
  18.                             </td>
  19.                             <td style="white-space: nowrap;">
  20.                                 <input id="key" class="mini-textbox" emptytext="请输入姓名" style="width: 350px;" onenter="onKeyEnter" />
  21.                                 <a class="mini-button" onclick="search()">查询</a>
  22.                             </td>
  23.                         </tr>
  24.                     </table>
  25.                 </div>
  26.                 <div class="mini-fit">
  27.                     <div id="datagrid1" class="mini-datagrid" style="width: 100%; height: 33%;" url="../data/AjaxService.aspx?method=SearchEmployees"
  28.                         idfield="id" allowresize="true" pagesize="20" allowcelledit="true" allowcellselect="true"
  29.                         multiselect="true" editnextonenterkey="true" editnextrowcell="true">
  30.                         <div property="columns">
  31.                             <div type="indexcolumn">
  32.                             </div>
  33.                             <div type="checkcolumn">
  34.                             </div>
  35.                             <div name="LoginName" field="loginname" headeralign="center" allowsort="true" width="150">
  36.                                 员工帐号
  37.                                 <input property="editor" class="mini-textbox" style="width: 100%;" minwidth="200" />
  38.                             </div>
  39.                             <div field="age" width="100" allowsort="true">
  40.                                 年龄
  41.                                 <input property="editor" class="mini-spinner" minvalue="0" maxvalue="200" value="25"
  42.                                     style="width: 100%;" />
  43.                             </div>
  44.                             <div name="birthday" field="birthday" width="100" allowsort="true" dateformat="yyyy-MM-dd">
  45.                                 出生日期
  46.                                 <input property="editor" class="mini-datepicker" style="width: 100%;" />
  47.                             </div>
  48.                             <div field="remarks" width="120" headeralign="center" allowsort="true">
  49.                                 备注
  50.                                 <input property="editor" class="mini-textarea" style="width: 200px;" minwidth="200"
  51.                                     minheight="50" />
  52.                             </div>
  53.                             <!--ComboBox：本地数据-->
  54.                             <div type="comboboxcolumn" autoshowpopup="true" name="gender" field="gender" width="100"
  55.                                 allowsort="true" align="center" headeralign="center">
  56.                                 性别
  57.                                 <input property="editor" class="mini-combobox" style="width: 100%;" data="Genders" />
  58.                             </div>
  59.                             <!--ComboBox：远程数据-->
  60.                             <div type="comboboxcolumn" field="country" width="100" headeralign="center">
  61.                                 国家
  62.                                 <input property="editor" class="mini-combobox" style="width: 100%;" url="../data/countrys.txt" />
  63.                             </div>
  64.                             <div type="checkboxcolumn" field="married" truevalue="1" falsevalue="0" width="60"
  65.                                 headeralign="center">
  66.                                 婚否</div>
  67.                         </div>
  68.                     </div>
  69.                     <div id="datagrid1" class="mini-datagrid" style="width: 100%; height: 33%;" url="data/AjaxService.jsp?method=SearchCustomers"
  70.                         idfield="id">
  71.                         <div property="columns">
  72.                             <div field="userid" width="120" headeralign="center" allowsort="true">
  73.                                 员工帐号</div>
  74.                             <div field="username" width="100" allowsort="true" renderer="onGenderRenderer" align="center"
  75.                                 headeralign="center">
  76.                                 用户名</div>
  77.                             <div field="useralias" width="100" allowsort="true">
  78.                                 别名</div>
  79.                             <div field="mobilephone" width="100" allowsort="true" dateformat="yyyy-MM-dd">
  80.                                 出生日期</div>
  81.                             <div field="sex" width="100" headeralign="center" dateformat="yyyy-MM-dd" allowsort="true">
  82.                                 创建日期</div>
  83.                             <div name="action" width="120" headeralign="center" align="center" renderer="onActionRenderer"
  84.                                 cellstyle="padding:0;">
  85.                                 操作</div>
  86.                         </div>
  87.                     </div>
  88.                     <div id="datagrid2" class="mini-datagrid" style="width: 100%; height: 34%;" url="data/AjaxService.jsp?method=SearchCustomers"
  89.                         idfield="id">
  90.                         <div property="columns">
  91.                             <div field="userid" width="120" headeralign="center" allowsort="true">
  92.                                 员工帐号</div>
  93.                             <div field="username" width="100" allowsort="true" renderer="onGenderRenderer" align="center"
  94.                                 headeralign="center">
  95.                                 用户名</div>
  96.                             <div field="useralias" width="100" allowsort="true">
  97.                                 别名</div>
  98.                             <div field="mobilephone" width="100" allowsort="true" dateformat="yyyy-MM-dd">
  99.                                 出生日期</div>
  100.                             <div field="sex" width="100" headeralign="center" dateformat="yyyy-MM-dd" allowsort="true">
  101.                                 创建日期</div>
  102.                             <div name="action" width="120" headeralign="center" align="center" renderer="onActionRenderer"
  103.                                 cellstyle="padding:0;">
  104.                                 操作</div>
  105.                         </div>
  106.                     </div>
  107.                 </div>
  108.             </div>
  109.         </div>
  110.         <div showcollapsebutton="true">
  111.         </div>
  112.     </div>
  113.     </div>
复制代码
作者: zhaolq    时间: 2016-8-7 09:27:32

felt 发表于 2016-8-5 09:38

试过了，可以达到要求，万分感谢！
作者: zhaolq    时间: 2016-8-7 09:36:57

felt 发表于 2016-8-5 09:38

在布局的时候如果想自适应，应该直接用miniui渲染过的父元素，而不要直接放在原生的父元素中，否则会导致自适应宽高出现问题，我这样理解对把？
作者: dforce    时间: 2016-8-8 09:35:35

zhaolq 发表于 2016-8-7 09:36
在布局的时候如果想自适应，应该直接用miniui渲染过的父元素，而不要直接放在原生的父元素中，否则会导致 ...

如果你放的元素能自适应，那么放里面撑满的控件也可以



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