EasyUI Dialog 窗体布局记要

ramantic 2021-08-08 原文

Markdown

通常在窗体里放置的都是表单，或者使用分栏(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 都行。

经过以上精心调试，页面呈现如下：

Markdown