通常在窗体里放置的都是表单,或者使用分栏(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 窗体 布局记要的更多相关文章

  1. 窗口-EasyUI Window 窗口、EasyUI Dialog 对话框、EasyUI Messager 消息框

    EasyUI Window 窗口 扩展自 $.fn.panel.defaults.通过 $.fn.window.defaults 重写默认的 defaults. 窗口(window)是一个浮动的.可拖 ...

  2. Easyui dialog中嵌入iframe

    如果easyui dialog的地址属性用href超链接,easyui 不会加载整个url页面,只会截取url目标页的body体间的html, 如果想加载把其他页面 加载进dialog的iframe中 ...

  3. Android自定义Dialog及其布局

     实际项目开发中默认的Dialog样式无法满足需求,需要自定义Dialog及其布局,并响应布局中控件的事件. 上效果图: 自定义Dialog,LogoutDialog: 要将自定义布局传入构造函数中, ...

  4. jquery.util.easyui.dialog

    (function ($) { var $parent = parent.$; //获取弹出窗口数据集合 function getDialogs() { var dialogs = $parent(& ...

  5. pyqt5 窗体布局

    窗体布局 1使用qtdesigner新建一个对话框,然后拖放几个按钮和文本框,按钮使用水平布局,效果如下: 鼠标选中水平布局再选中文本框,进行垂直布局,如下: 垂直布局后的效果如下: 然后,如何让窗体 ...

  6. Android_Dialog_设置Dialog窗体的大小

    /** * 设置Dialog窗体的大小 */ private void setWindowSize() { DisplayMetrics dm = new DisplayMetrics(); Wind ...

  7. C#入门经典(2-重置窗体布局,界面介绍,错误列表)

  8. easyui dialog 中嵌入html页面

    最近使用easyui比较多,这个插件确实很好用.在使用时也遇到了大大小小的问题,好在都一一解决了. 记录一下今天遇到的问题. 目的:用easyui的dialog嵌入一个html页面(html中仍有要执 ...

  9. easyui dialog 中 panel-body 高度太小出现 滚动条 的原因

    easyui dialog 中 panel-body 高度太小出现 滚动条 的原因: dialog 高度比 iframe 高度大79 就可以了 $.editcompanypersoninfo = fu ...

随机推荐

  1. Web应用程序的开发步骤

    Web应用程序的开发步骤 如今已进入了web2.0高速发展的互联网时代,各种互联网的Web应用程序如雨后春笋般出现.那么作为一名Web开发人员,怎样去开发一款优秀的Web应用程序呢?这个问题没有一个简 ...

  2. 四则运算GUI版

    小学四则运算界面版 李永豪 201421123117 郑靖涛 201421123114 coding 地址:https://git.coding.net/ras/work2.git 一.题目描述 我们 ...

  3. 201521123065《java程序设计》第14周学习总结

    1. 本周学习总结 1.大部分情况下使用的数据库是关系型的数据库,使用表存储数据: 2.关系型数据库可以通过唯一的主键查找记录,也可以通过多个信息确定主键: 3.Mysql操作:显示-show dat ...

  4. 201521123113《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图.Onenote或其他)归纳总结多数据库相关内容. JDBC体系架构: 2. 书面作业 Q1. MySQL数据库基本操作 1.1 建立数据库test ...

  5. Could not execute JDBC batch update; SQL [delete from role where roleId=?]; constraint [null]; neste

    今天在写多个删除功能的时候出现了这么一个错误:意思是删除操作的时候,没有找到对应的外键. Cannot delete or update a parent row: a foreign key con ...

  6. 如何用SQL实现组内前几名的输出

    关于问题 如何查询组内最大的,最小的,大家或许都知道,无非是min.max的函数使用.可是如何在MySQL中查找组内最好的前两个,或者前三个? 什么是相关子查询 在提出对于这个问题的对应方法之前,首先 ...

  7. 鸟哥Linux学习笔记04

    1, . 当前目录  ..上层目录 2, 目录的相关操作 1)cd(切换目录) [root@node1 ~]# cd [相对路径或绝对路径] [root@node1 ~]# cd      : 回到自 ...

  8. Hibernate由model类自动同步数据库表结构

    在开发中遇到了个问题,每次测试数据库增加表结构的时候,本地pull下最新代码导致启动报错,上网搜了快速解决办法---->hibernate 配置属性中,hibernate.hbm2ddl.aut ...

  9. ACM学习之路___HDU 1385(带路径保存的 Floyd)

    Description These are N cities in Spring country. Between each pair of cities there may be one trans ...

  10. html tip实现

    一.介绍before/after CSS中的before和after伪类选择器早在CSS2时就被引入,改属性被所有主流浏览器所支持了.before和after顾名思义,分别指的是伪元素在元素前/后添加 ...