EasyUI datagrid增加查询元素后高度不准确

刚刚开始学习easyui 也没有找到一个非常完整的示例可供才考,只好自己摸索学习了。

首先啊,datagrid增加了一个查询区域,并确保datagrid高度自适应,如下图所示:

<!-------------------------------嵌套----------------------------------->
            <div class="easyui-layout" data-options="fit:true">
                <!-------------------------------搜索框----------------------------------->
                <div data-options="region:'north',border:false" style="height: 80px;">
                    <fieldset>
                        <legend>信息查询</legend>
                        <form id="ffSearch" method="post">
                            <div style="margin-bottom: 5px">
                                <label for="txtName">条件A:</label>
                                <input type="text" id="txtName" name="txtName" style="width: 100px" />&nbsp;&nbsp;&nbsp;
                        <label for="txtIcon">条件B:</label>
                                <input type="text" id="txtIcon" name="txtIcon" style="width: 100px" />&nbsp;&nbsp;&nbsp;
                        <label for="txtSeq">条件C:</label>
                                <input type="text" id="txtSeq" name="txtSeq" style="width: 100px" />&nbsp;&nbsp;&nbsp;
                        <label for="txtFunctionId">条件D:</label>
                                <input type="text" id="txtFunctionId" name="txtFunctionId" style="width: 100px" />&nbsp;&nbsp;&nbsp;
                            </div>
                            <div>
                                <label for="txtWinformType">条件E:</label>
                                <input type="text" id="txtWinformType" name="txtWinformType" style="width: 100px" />&nbsp;&nbsp;&nbsp;
                        <label for="txtUrl">条件F:</label>
                                <input type="text" id="txtUrl" name="txtUrl" style="width: 100px" />&nbsp;&nbsp;&nbsp;
                        <label for="txtWebIcon">条件G:</label>
                                <input type="text" id="txtWebIcon" name="txtWebIcon" style="width: 100px" />&nbsp;&nbsp;&nbsp;
                        
                         <a href="#" class="easyui-linkbutton" iconcls="icon-search" id="btnSearch">查询</a>
                            </div>
                        </form>
                    </fieldset>
                </div>
                <!-------------------------------详细信息展示表格----------------------------------->
                <div id="Div1" data-options="region:'center',title:'',iconCls:'icon-book',border:false">
                    <table class="easyui-datagrid" id="list_data">
                        <thead>
                            <tr>
                                <th data-options="field:'itemid'">Item ID</th>
                                <th data-options="field:'productid'">Product</th>
                                <th data-options="field:'listprice',align:'right'">List Price</th>
                                <th data-options="field:'unitcost',align:'right'">Unit Cost</th>
                                <th data-options="field:'attr1'">Attribute</th>
                                <th data-options="field:'status',align:'center'">Status</th>
                            </tr>
                        </thead>
                    </table>
                    <!--<table id="list_data"></table>-->
                </div>
            </div>

重点是 <div data-options="region:'north',border:false" style="height: 80px;"> 这行代码

posted @ 2014-06-11 16:46  小小的风  阅读(360)  评论(0)    收藏  举报