大家好，又见面了，我是全栈君。
通常在窗体里放置的都是表单，或者使用分栏(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 都行。
经过以上精心调试，页面呈现如下：
转载于:https://www.cnblogs.com/ramantic/p/7656559.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/108111.html原文链接：https://javaforall.net
