通常在窗体里放置的都是表单,或者使用分栏(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. 1011. A+B和C (15)

    /*1011. A+B和C (15) 时间限制150 ms内存限制65536 kB代码长度限制8000 B判题程序Standard作者HOU, Qiming给定区间[-231, 231]内的3个整数A ...

  2. JQuery实用技巧--学会你也是大神(1)——插件的制作技巧

      前  言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...

  3. 个人作业3——个人总结(Alpha阶段)

    个人总结 Alpha阶段总结: 起初关于手机app的开发真的一无所知,选了一条较远的路走(使用 Android Studio 来开发 Android 应用更加方便,而我们选用 Eclipse 开发 A ...

  4. 201521123026《Java程序设计》第2周学习总结

    1. 本章学习收获 1.熟悉了码云的部分功能的使用 2.java编程基础的巩固以及延伸 3.解决了部分PTA编程时所遇到困难并明白了解决困难的方法的原理 4.了解了用package和import管理类 ...

  5. 201521123057 《Java程序设计》第2周学习总结

    1. 本章学习总结 本周Java教学主要围绕Java的基本语法展开.在本周的学习中,我了解到了: -Integer的取值范围 -if...else条件式,switch条件式,while循环,break ...

  6. 201521123114《Java程序设计》第9周学习总结

    1. 本章学习总结 2. 书面作业 Q1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 经常出现的异常 ...

  7. Java课程设计-计算器

    1.团队课程设计博客链接 http://www.cnblogs.com/yuanj/p/7072137.html 2.个人负责模块或任务说明 监听器的设置 3.自己的代码提交记录截图 //注册各个组件 ...

  8. 201521123096《Java程序设计》第十二周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  9. JAVA课程设计-----加减法测试博客

    1.团队成员介绍(一个人做的) 谢季努:网络1513 201521123079 2.项目git地址 3.项目git提交截图 4.项目运行截图 输入答案后点击确认就会出现本次的得分 如果觉得成绩不理想点 ...

  10. java向前引用

    根据看书和看得文章,引出了一个关于"向前引用"的问题: public class InstanceInitTest { static { // { a = 6; System.ou ...