EasyUI Dialog 窗體 布局記要

通常在窗體里放置的都是表單，或者使用分欄(Tab)來陳列信息也是非常的好用。在這里特別記錄一下在窗體里同時放置表單和表格的設計思路。

僅放置一個表單

通常 Dialog 里只放一個表單，而且表單的行數並不多，所以這也是最簡單的情形。

<div id="editDialog" class="easyui-dialog"
data-options="
        title:'Edit窗體',
        width:650,
        iconCls:'icon-save',
        resizable:false,
        modal:true,
        closed:true,
        maintainState :'',
        buttons:'#editDialogToolbar' ">
    <form id="editForm" method="post" novalidate="novalidate">

    </form>
</div>

<div id="editDialogToolbar">
    <a id="btnSaveEditDialog" href="javascript:void(0)" class="easyui-linkbutton"
       data-options="iconCls:'icon-ok' ">確定</a>
    <a id="btnCloseEditDialog" href="javascript:void(0)" class="easyui-linkbutton"
       data-options="iconCls:'icon-cancel' ">關閉</a>
</div>

備注：

• 不需要指定高度，因為 90% 情形下表單的行數並不多
• 不需要任何布局元素，在內部直接放上 form 即可。

表單+列表(datagrid)

如果要放置表單和列表，可以考慮引入 layout，來進行輔助布局。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<div id="editDialog" class="easyui-dialog"
     data-options="
        title:'編輯窗體',
        width:720,
        height:547,
        iconCls:'icon-save',
        resizable:false,
        modal:true, 
        closed:true,
        maintainState :'',
        buttons:'#editDialogToolbar' ">

    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north', border:false" style="height:161px">
            <form id="editForm" method="post" novalidate="novalidate">
                <%-- 表單元素中 name 屬性的值是大小寫敏感 --%>
                <input id="hiddenRationPackageId_Edit" name="rationPackageId" type="hidden" value=""/>               

            </form>
        </div>
        <div data-options="region:'center'">
            <!-- 定額套餐明細 -->
            <div id="editDatagrid"></div>
        </div>
    </div>
</div>

備注：

• Dialog：對話框需要指定高度“height:547”，用以間接限定表格(datagrid)的高度。
• Layout：引入“easyui-layout”進行輔助布局，同時加上 data-options="fit:true"
• Form：對放置表單區域的面板指定高度，此處需要精心計算，通常依照表單的實際高度來定，比如“style="height:161px"”。
• Datagrid：為 datagrid 的定義加上“fit：true”，可以不加“height: 100%;”
• 總結：一個是 dialog 的高度，一個是 layout 的 north 區域的高度。north 區域的高度需依據內嵌的表單來靈活設定，而 center 區域不用刻意設計高度，它會自由伸縮。這樣只要表單未做任何變動，其 north 區域的高度就恆定為 161px，而 dialog 的綜合高度就隨意得多，理論上只要大於 161 即可，細心微調到一個合適的高度即可，比如 400、500 都行。

經過以上精心調試，頁面呈現如下：