EasyUI Dialog 窗体 布局记要
通常在窗体里放置的都是表单,或者使用分栏(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 窗体 布局记要的更多相关文章
- 窗口-EasyUI Window 窗口、EasyUI Dialog 对话框、EasyUI Messager 消息框
EasyUI Window 窗口 扩展自 $.fn.panel.defaults.通过 $.fn.window.defaults 重写默认的 defaults. 窗口(window)是一个浮动的.可拖 ...
- Easyui dialog中嵌入iframe
如果easyui dialog的地址属性用href超链接,easyui 不会加载整个url页面,只会截取url目标页的body体间的html, 如果想加载把其他页面 加载进dialog的iframe中 ...
- Android自定义Dialog及其布局
实际项目开发中默认的Dialog样式无法满足需求,需要自定义Dialog及其布局,并响应布局中控件的事件. 上效果图: 自定义Dialog,LogoutDialog: 要将自定义布局传入构造函数中, ...
- jquery.util.easyui.dialog
(function ($) { var $parent = parent.$; //获取弹出窗口数据集合 function getDialogs() { var dialogs = $parent(& ...
- pyqt5 窗体布局
窗体布局 1使用qtdesigner新建一个对话框,然后拖放几个按钮和文本框,按钮使用水平布局,效果如下: 鼠标选中水平布局再选中文本框,进行垂直布局,如下: 垂直布局后的效果如下: 然后,如何让窗体 ...
- Android_Dialog_设置Dialog窗体的大小
/** * 设置Dialog窗体的大小 */ private void setWindowSize() { DisplayMetrics dm = new DisplayMetrics(); Wind ...
- C#入门经典(2-重置窗体布局,界面介绍,错误列表)
- easyui dialog 中嵌入html页面
最近使用easyui比较多,这个插件确实很好用.在使用时也遇到了大大小小的问题,好在都一一解决了. 记录一下今天遇到的问题. 目的:用easyui的dialog嵌入一个html页面(html中仍有要执 ...
- easyui dialog 中 panel-body 高度太小出现 滚动条 的原因
easyui dialog 中 panel-body 高度太小出现 滚动条 的原因: dialog 高度比 iframe 高度大79 就可以了 $.editcompanypersoninfo = fu ...
随机推荐
- 1011. A+B和C (15)
/*1011. A+B和C (15) 时间限制150 ms内存限制65536 kB代码长度限制8000 B判题程序Standard作者HOU, Qiming给定区间[-231, 231]内的3个整数A ...
- JQuery实用技巧--学会你也是大神(1)——插件的制作技巧
前 言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...
- 个人作业3——个人总结(Alpha阶段)
个人总结 Alpha阶段总结: 起初关于手机app的开发真的一无所知,选了一条较远的路走(使用 Android Studio 来开发 Android 应用更加方便,而我们选用 Eclipse 开发 A ...
- 201521123026《Java程序设计》第2周学习总结
1. 本章学习收获 1.熟悉了码云的部分功能的使用 2.java编程基础的巩固以及延伸 3.解决了部分PTA编程时所遇到困难并明白了解决困难的方法的原理 4.了解了用package和import管理类 ...
- 201521123057 《Java程序设计》第2周学习总结
1. 本章学习总结 本周Java教学主要围绕Java的基本语法展开.在本周的学习中,我了解到了: -Integer的取值范围 -if...else条件式,switch条件式,while循环,break ...
- 201521123114《Java程序设计》第9周学习总结
1. 本章学习总结 2. 书面作业 Q1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 经常出现的异常 ...
- Java课程设计-计算器
1.团队课程设计博客链接 http://www.cnblogs.com/yuanj/p/7072137.html 2.个人负责模块或任务说明 监听器的设置 3.自己的代码提交记录截图 //注册各个组件 ...
- 201521123096《Java程序设计》第十二周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...
- JAVA课程设计-----加减法测试博客
1.团队成员介绍(一个人做的) 谢季努:网络1513 201521123079 2.项目git地址 3.项目git提交截图 4.项目运行截图 输入答案后点击确认就会出现本次的得分 如果觉得成绩不理想点 ...
- java向前引用
根据看书和看得文章,引出了一个关于"向前引用"的问题: public class InstanceInitTest { static { // { a = 6; System.ou ...