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 都行。

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