jQuery MiniUI

标题: mini-fit显示不正常 [打印本页]
作者: hks2002    时间: 2017-3-19 21:50:48     标题: mini-fit显示不正常

本帖最后由 hks2002 于 2017-3-19 21:55 编辑
  1. <fieldset id="SearchFieldset">
  2.     <legend><label><input type="checkbox" checked id="checkbox1" hideFocus/>搜索条件(Search Criteria)</label></legend>
  3.     <div class="fieldset-body">
  4.         <input labelField="true" label="ID：" id="id"  name="menuId" class="mini-textbox" />
  5.         <input labelField="true" label="Menu Name:" id="menuName" name="menuName" class="mini-textbox" />
  6.         <input labelField="true" label="menuTooltip" style="width:400px;" id="menuTooltip" name="menuTooltip" class="mini-textarea"/>
  7.                 <input labelField="true" label="menuDesc" style="width:400px;" id="menuDesc" name="menuDesc" class="mini-textarea"/>
  8.         <input labelField="true" label="createdAt" id="createdAt" name="createdAt" class="mini-datepicker" value="2010-10-12"/>
  9.                 <input labelField="true" label="createdBy" id="createdBy" name="createdBy" class="mini-textbox" />
  10.                 <input labelField="true" label="updatedAt" id="updatedAt" name="updatedAt" class="mini-datepicker" value="2010-10-12"/>
  11.                 <input labelField="true" label="updatedBy" id="updatedBy" name="updatedBy" class="mini-textbox" />
  12.         <input labelField="true" label="ComboBox：" name="Country" showNullItem="true" class="mini-combobox" url="sqlsearch/sqlComparisonOperator" value="Equal" textField="text" valueField="op" />
  13.         <a class="mini-button" >搜索(Search)</a>
  14.         <a class="mini-button" >清除(Clear)</a>
  15.     </div>
  16. </fieldset>
  17. <!--撑满页面-->
  18. <div class="mini-fit" >
  19.          <div id="menugrid" class="mini-datagrid" url="menu/ajaxService?method=getpagejson"
  20.          style="height:100%" showLoading="false" allowAlternating="true" sizeList="[10,50,100,500,1000]"
  21.          showEmptyText="true" emptyText="无返回数据(No data found)!"
  22.          >
  23.         <div property="columns">
  24.             <div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">#</div>
  25.             <div field="menuId" width="120" headerAlign="center" allowSort="true">ID</div>               
  26.             <div field="menuName" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">名称</div>            
  27.             <div field="menuTooltip" width="100" allowSort="true">提示</div>
  28.             <div field="menuDesc" width="100" allowSort="true" dateFormat="yyyy-MM-dd">描述</div>                                    
  29.             <div field="createdAt" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
  30.             <div field="createdBy" width="100" headerAlign="center" allowSort="true">创建人</div>
  31.                         <div field="updatedAt" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">更新日期</div>
  32.                         <div field="updatedBy" width="100" headerAlign="center" allowSort="true">更新人</div>
  33.         </div>
  34.     </div>  
  35. </div>  
  36. <script type="text/javascript">
  37. mini.parse();
  38. mini.layout();
  39. function onSearch() {
  40.         var menugrid = mini.get("menugrid");
  41.         menugrid.load();
  42. }

  44. function toggleSearchFieldset(ck, id){
  45.                 var dom = document.getElementById(id);
  46.                 dom.className = !ck.checked ? "hideFieldset" : "";
  47.                 mini.layout();
  48. }
  49. </script>
复制代码

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
以上代码单独一页显示正常，当嵌入Tab中以后，data-grid的分页栏就不可见了, tab是URL加载的方式嵌入的。

作者: dforce    时间: 2017-3-20 11:37:37

mini-fit的原理是父元素高度-兄弟元素高度
从你的页面看，你没设置页面尺寸

<style>
html,body
{
    height:100%;width:100%;padding:0;margin:0;
    }
</style>
作者: hks2002    时间: 2017-3-20 12:39:43

dforce 发表于 2017-3-20 11:37
mini-fit的原理是父元素高度-兄弟元素高度
从你的页面看，你没设置页面尺寸

[attach]8988[/attach]
页面已经设置了宽度和高度了，我写在miniui.css里面了。
作者: dforce    时间: 2017-3-20 13:57:54

hks2002 发表于 2017-3-20 12:39
页面已经设置了宽度和高度了，我写在miniui.css里面了。

[attach]8989[/attach]
这例子是按这个代码做的，可以正常撑满页面。

作者: hks2002    时间: 2017-3-20 14:19:57

本帖最后由 hks2002 于 2017-3-20 14:21 编辑
dforce 发表于 2017-3-20 13:57
这例子是按这个代码做的，可以正常撑满页面。

单独一个页面是没有问题的，但是嵌入Tab中就不行了。你看我发的截图，表格的分页栏是看不到的。
作者: hks2002    时间: 2017-3-20 14:44:16

hks2002 发表于 2017-3-20 14:19
单独一个页面是没有问题的，但是嵌入Tab中就不行了。你看我发的截图，表格的分页栏是看不到的。 ...

我再看看，刚才试了一下，直接套在tab里没有问题。有可能是我最外层有个layout的原因，
作者: hks2002    时间: 2017-3-20 15:18:24

hks2002 发表于 2017-3-20 14:44
我再看看，刚才试了一下，直接套在tab里没有问题。有可能是我最外层有个layout的原因， ...
  1.   <div id="layout1" class="mini-layout" style="width:100%;height:100%;">
  2.    <div region="north" showsplit="false" showheader="false" height="0">
  3.    </div>
  4.    <div title="center" region="center" bodystyle="overflow:hidden;">
  5.     <!--ToolBars-->
  6.     <div class="mini-toolbar" style="margin:0px;background:white;border:0" >
  7. <a class="mini-button" >增加</a>
  8. <a class="mini-button" >修改</a>
  9. <a class="mini-button" >删除</a>
  10. <span class="separator"></span>
  11. <a class="mini-button" >增加</a>
  12. <a class="mini-button" >修改</a>
  13. <a class="mini-button" >删除</a>
  14. <input class="mini-textbox" />
  15. <a class="mini-button" plain="true">查询</a>
  16. </div>  
  17.     <!--Tabs-->
  18.     <div id="mainTabs" class="mini-tabs bg-toolbar" activeindex="0" style="width:100%;height:100%;" bodystyle="border:0;background:white;" maskonload="false">
  19.      <div title="首页" url="uisetting">
  20.       <!--Tabs-->
  21.       <div id="uiSettingTabs" class="mini-tabs bg-toolbar" activeindex="0" style="width:100%;height:100%;" bodystyle="border:0;background:white;" maskonload="false">
  22.        <div title="菜单(Menus)" url="menu">
  23.         <fieldset id="SearchFieldset" class="hideFieldset">
  24.          <legend><label><input type="checkbox" id="checkbox1" onclick="toggleSearchFieldset(this, 'SearchFieldset')" hidefocus="" />搜索条件(Search Criteria)</label></legend>
  25.          <div class="fieldset-body">
  26.           <form id="menuSearch">
  27.            <input labelfield="true" label="ID：" id="id" name="menuId" class="mini-textbox" />
  28.            <input labelfield="true" label="Menu Name:" id="menuName" name="menuName" class="mini-textbox" />
  29.            <input labelfield="true" label="menuTooltip" style="width:400px;" id="menuTooltip" name="menuTooltip" class="mini-textarea" />
  30.            <input labelfield="true" label="menuDesc" style="width:400px;" id="menuDesc" name="menuDesc" class="mini-textarea" />
  31.            <input labelfield="true" label="createdAt" id="createdAt" name="createdAt" class="mini-datepicker" />
  32.            <input labelfield="true" label="createdBy" id="createdBy" name="createdBy" class="mini-textbox" />
  33.            <input labelfield="true" label="updatedAt" id="updatedAt" name="updatedAt" class="mini-datepicker" />
  34.            <input labelfield="true" label="updatedBy" id="updatedBy" name="updatedBy" class="mini-textbox" />
  35.            <input labelfield="true" label="ComboBox：" name="op_menuId" class="mini-combobox" url="sqlsearch/sqlComparisonOperator" value="Equal" textfield="text" valuefield="op" />
  36.           </form>
  37.          </div>
  38.         </fieldset>
  39.         <div class="mini-toolbar" style="margin:3px;background:white;border:0">
  40.          <a class="mini-button" onclick="onSearch">搜索(Search)</a>
  41.          <a class="mini-button" onclick="onClear">清除(Clear)</a>
  42.         </div>
  43.         <!--撑满页面-->
  44.         <div class="mini-fit">
  45.          <div id="menuGrid" class="mini-datagrid" url="menu/ajaxService?method=getpagejson" showloading="false" allowalternating="true" showemptytext="true" emptytext="无返回数据(No data found)!" style="height:100%" sizelist="[10,50,100,500,1000]">
  46.           <div property="columns">
  47.            <div name="action" width="120" headeralign="center" align="center" renderer="onActionRenderer" cellstyle="padding:0;">#</div>
  48.            <div field="menuId" width="120" allowsort="true">ID</div>
  49.            <div field="menuName" width="100" allowsort="true" renderer="onGenderRenderer">名称</div>
  50.            <div field="menuTooltip" width="100" allowsort="true">提示</div>
  51.            <div field="menuDesc" width="100" allowsort="true" dateformat="yyyy-MM-dd">描述</div>
  52.            <div field="createdAt" width="100" dateformat="yyyy-MM-dd" allowsort="true">创建日期</div>
  53.            <div field="createdBy" width="100" allowsort="true">创建人</div>
  54.            <div field="updatedAt" width="100" dateformat="yyyy-MM-dd" allowsort="true">更新日期</div>
  55.            <div field="updatedBy" width="100" allowsort="true">更新人</div>
  56.           </div>
  57.          </div>
  58.         </div>
  59.         <script type="text/javascript">
  60.                         mini.layout();
  61.                         mini.parse();

  63.                         function toggleSearchFieldset(ck, id){
  64.                                         var dom = document.getElementById(id);
  65.                                         dom.className = !ck.checked ? "hideFieldset" : "";
  66.                                         mini.layout();
  67.                         }

  69.                         function onSearch() {
  70.                                 var menuGrid   = mini.get("menuGrid");
  71.                                 var menuSearch = new mini.Form("menuSearch");
  72.                                 var data = menuSearch.getData();      //获取表单多个控件的数据
  73.                                 var key = mini.encode(data);

  75.                                 menuGrid.load({ key: key });
  76.                         }
  77.        </script>
  78.        </div>
  79.        <div title="菜单组(Menus Groups)" url="menusgroup">
  80.        </div>
  81.        <div title="按键(Buttons)" url="button">
  82.        </div>
  83.        <div title="标签页(Tabs)" url="tab">
  84.        </div>
  85.        <div title="代办(To Do List)" url="todolist">
  86.        </div>
  87.       </div>
  88.      </div>
  89.      <div title="首页2" url="menu">
  90.      </div>
  91.      <div title="首页3" url="dept/index">
  92.      </div>
  93.      <div title="首页4" url="dept/show/1">
  94.      </div>
  95.     </div>
  96.    </div>
  97.    <div title="south" region="south" showsplit="false" showheader="false" height="30">
  98.    </div>
  99.   </div>
复制代码
找到问题产生的地方了，就是中间有个toolbar. 去掉toolbar后，显示就正常了，这个toolbar需要怎么修改呢？
作者: dforce    时间: 2017-3-20 15:47:25

hks2002 发表于 2017-3-20 15:18
找到问题产生的地方了，就是中间有个toolbar. 去掉toolbar后，显示就正常了，这个toolbar需要怎么修改呢 ...

请不要设置margin，这种mini-fit计算的时候不会计算进去，然后就会造成误差
作者: hks2002    时间: 2017-3-20 15:54:47

dforce 发表于 2017-3-20 15:47
请不要设置margin，这种mini-fit计算的时候不会计算进去，然后就会造成误差

解决了，可以在Toolbar外面再套一个div, 或者maintabs外套一个div 并设置class="mini-fit". 我原来的代码里面
maitabs的height=100%. 这个肯定会导致问题的。
谢谢版主。



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