jQuery MiniUI

标题: grid底部的分页工具栏不见了 [打印本页]
作者: kakagu    时间: 2013-3-28 23:51:04     标题: grid底部的分页工具栏不见了

代码如下，原来是有分页工具栏的（这东西默认就有），但是我在表格顶部加了一个保存删除的工具栏后（代码是复制你们的demo），表格的分页工具栏不见了，如果我把表头工具栏删除掉，分页工具栏又出来了，不知何故。

<body>
    <input type="hidden" runat="server" id="SavedRoomID" />
    <input type="hidden" runat="server" id="SavedSpecID" />
    <div style="width:100%;">
        <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
            <table style="width:100%;">
                <tr>
                    <td style="width:100%;">
                        <a class="mini-button" iconCls="icon-add" plain="true">增加</a>
                        <a class="mini-button" iconCls="icon-remove" plain="true">删除</a>
                        <span class="separator"></span>
                        <a class="mini-button" iconCls="icon-save" plain="true">保存</a>            
                    </td>
                    <td style="white-space:nowrap;">
                        <input id="key" class="mini-textbox" emptyText="请输入设备名称" style="width:200px;"/>
                        <a class="mini-button">查询</a>
                    </td>
                </tr>
            </table>           
        </div>
    </div>
    <div id="devGrid" class="mini-datagrid" style="width: 100%; height: 100%;" idfield="ID"
        allowresize="true" pagesize="30" allowcelledit="true" allowcellselect="true"
        multiselect="true" editnextonenterkey="true">
        <div property="columns">
            <div type="checkcolumn">
            </div>
            <div type="indexcolumn">
            </div>
            <div field="Name" width="200" allowsort="true">
                名称
                <input property="editor" class="mini-textbox" style="width: 100%;" />
            </div>            
            <div field="Code" width="150" allowSort="true">
                编码
                <input property="editor" class="mini-textbox" style="width:100%;"/>
            </div>   
            <!--grid：机架-->
            <div type="comboboxcolumn" field="Spec" width="80" headerAlign="center" >
                机架
                <input id="btnRackEdit"  property="editor" class="mini-buttonedit" name="a" textName="b" allowInput="false"/>              
            </div>
            <!--ComboBox：专业-->
            <div type="comboboxcolumn" field="Spec" width="80" headerAlign="center" >
                专业
                <input property="editor" class="mini-combobox" textField="Name" valueField="ID" style="width:100%;" url="/RoomDev.aspx?method=GetSpec" />               
            </div>
            <div field="Note" width="200" headerAlign="center" allowSort="true">
                备注
                <input property="editor" class="mini-textarea" style="width:100%;" minHeight="50"/>
            </div>
        </div>
    </div>
</body>

作者: factory    时间: 2013-3-29 09:24:20

  1. <body>
  2.     <input type="hidden" runat="server" id="SavedRoomID" />
  3.     <input type="hidden" runat="server" id="SavedSpecID" />
  4.     <div style="width:100%;">
  5.         <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
  6.             <table style="width:100%;">
  7.                 <tr>
  8.                     <td style="width:100%;">
  9.                         <a class="mini-button" iconCls="icon-add" plain="true">增加</a>
  10.                         <a class="mini-button" iconCls="icon-remove" plain="true">删除</a>
  11.                         <span class="separator"></span>
  12.                         <a class="mini-button" iconCls="icon-save" plain="true">保存</a>            
  13.                     </td>
  14.                     <td style="white-space:nowrap;">
  15.                         <input id="key" class="mini-textbox" emptyText="请输入设备名称" style="width:200px;"/>
  16.                         <a class="mini-button">查询</a>
  17.                     </td>
  18.                 </tr>
  19.             </table>           
  20.         </div>
  21.     </div>
  22.     <div class="mini-fit">
  23.         <div id="devGrid" class="mini-datagrid" style="width: 100%; height: 100%;" idfield="ID"
  24.             allowresize="true" pagesize="30" allowcelledit="true" allowcellselect="true"
  25.             multiselect="true" editnextonenterkey="true">
  26.             <div property="columns">
  27.                 <div type="checkcolumn">
  28.                 </div>
  29.                 <div type="indexcolumn">
  30.                 </div>
  31.                 <div field="Name" width="200" allowsort="true">
  32.                     名称
  33.                     <input property="editor" class="mini-textbox" style="width: 100%;" />
  34.                 </div>            
  35.                 <div field="Code" width="150" allowSort="true">
  36.                     编码
  37.                     <input property="editor" class="mini-textbox" style="width:100%;"/>
  38.                 </div>   
  39.                 <!--grid：机架-->
  40.                 <div type="comboboxcolumn" field="Spec" width="80" headerAlign="center" >
  41.                     机架
  42.                     <input id="btnRackEdit"  property="editor" class="mini-buttonedit" name="a" textName="b" allowInput="false"/>              
  43.                 </div>
  44.                 <!--ComboBox：专业-->
  45.                 <div type="comboboxcolumn" field="Spec" width="80" headerAlign="center" >
  46.                     专业
  47.                     <input property="editor" class="mini-combobox" textField="Name" valueField="ID" style="width:100%;" url="/RoomDev.aspx?method=GetSpec" />               
  48.                 </div>
  49.                 <div field="Note" width="200" headerAlign="center" allowSort="true">
  50.                     备注
  51.                     <input property="editor" class="mini-textarea" style="width:100%;" minHeight="50"/>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.     </div>
  56. </body>
复制代码
你表格的高度给100%，那就撑破了啊，你上面还有个toolbar，又不是没有，没有的话，100%正好撑满body，只要多加个有高度的元素，那就直接撑破吗，分页其实在的，只不过被挤到页面外面去了
所以你需要给表格外面价格mini-fit控件，来计算除除去toolbar之后的剩余高度，然后让表格在fit里面100%撑满，就正确了



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