设为首页收藏本站

jQuery MiniUI

 找回密码
 立即注册
jQuery MiniUI › 论坛 › MiniUI › 技术交流 › 紧急紧急！关于复杂页面布局表格自适应宽高的问题！ ...
返回列表 发新帖
查看: 2658|回复: 0
打印 上一主题 下一主题

紧急紧急！关于复杂页面布局表格自适应宽高的问题！ [复制链接]

felt

Rank: 8Rank: 8
楼主
发表于 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>
复制代码

举报

返回列表 发新帖

Archiver|普加软件

GMT+8, 2024-5-27 10:59 , Processed in 1.026414 second(s), 10 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部