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

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