通常在窗体里放置的都是表单,或者使用分栏(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. (1)ES6中let,const,对象冻结,跨模块常量,新增的全局对象介绍

    1.let声明变量,var声明变量,而const声明的常量 2.let与var的区别 let可以让变量长期驻扎在内存当作 let的作用域是分块[ {快1  {快2 }  }每个大括号表示一个独立的块 ...

  2. 转:【深入Java虚拟机】之五:多态性实现机制——静态分派与动态分派

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17965867   方法解析 Class文件的编译过程中不包含传统编译中的连接步骤,一切方法 ...

  3. Swing-布局管理器之FlowLayout(流式布局)-入门

    FlowLayout应该是Swing布局管理器学习中最简单.最基础的一个.所谓流式,就是内部控件像水流一样,从前到后按顺序水平排列,直到达到容器的宽度时跳转到第二行.既然是水平排列,那么就存在三种基本 ...

  4. Quartz的misfire处理机制分析

    Quartz是一个特性丰富的开源的任务调度开发库,它可以很方便的集成到你的应用程序中.在Quartz中,当一个持久的触发器因为调度器被关闭或者线程池中没有可用的线程而错过了激活时间时,就会发生激活失败 ...

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

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 接口 接口(interface)就是方法声明和常量值的集合 实现接口的类叫接口的 ...

  6. 201521123010 《Java程序设计》第2周学习总结

    1. 本周学习总结 这周学习了在JAVA里各种数据类型的使用.各种运算符的使用.表达是的使用,还初步学习了枚举的用法,也掌握了一些枚举和switch语句结合的用法,还了解了一些字符串类.在实验课上也学 ...

  7. Java课程设计----仿Windows标准型计算器

    JAVA课程设计 仿Windows标准型计算器(By Yanboooooooo) 一.团队介绍: 连燕波[组长]:网络1513学生. 张文博[组员]:网络1513学生. 二.项目git地址 码云项目地 ...

  8. java课设

    1.代码截图: 2.设计思路 建立GUI界面,系统产生一个随机数(对用户不可见),然后用户输入猜测数,系统根据用户每次输入的数据给出评语(偏大,偏小,猜测成功).当用户最终猜测成功后,就把当次的随机数 ...

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

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

  10. Jquery基础添加删除内容

    直入主题,工作中比较常用的功能在input框内添加内容,不白话了,上代码! 布局: <div id="content"> <input type="te ...