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

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

巴特西

EasyUI Dialog 窗体布局记要

仅放置一个表单

表单+列表(datagrid)

最新文章

热门文章

巴特西

EasyUI Dialog 窗体 布局记要

仅放置一个表单

表单+列表(datagrid)

最新文章

热门文章

EasyUI Dialog 窗体布局记要