正文

EasyUI Dialog 窗体 布局记要

IP云
IP云V管理员/4 阅读
09/26
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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