（六）easyUI之对话框窗口
一、拥有HTML的对话框
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%String path=request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css"
href="<%=path%>/script/easyUI-1.4/themes/icon.css">
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery("#dialog_div").dialog({ title: 'My Dialog',
width: 400,
height: 200,
minimizable:true,
maximizable:true,
modal: true });
}); </script>
</head>
<body>
<pre>
1.拥有HTML的对话框
<div id="dialog_div">
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
</div> </pre>
</body>
</html>
结果：
二、远程加载的对话框
- href只负责加载body里的内容，而script标签和style标签的里的javasc和css是不生效的，content可以处理script标签和style标签的里的javasc和css
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css"
href="<%=path%>/script/easyUI-1.4/themes/icon.css">
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery("#dialog_div").dialog({ title: 'My Dialog',
width: 400,
height: 200,
minimizable:true,
maximizable:true,
content:"<iframe height='100%' weight='100%' border='0' src='<%=path%>/include.jsp'></iframe>",
modal : true });
});
</script>
</head>
<body>
<pre>
2.远程加载的对话框，
href只负责加载body里的内容，而script标签和style标签的里的javasc和css是不生效的
content可以处理script标签和style标签的里的javasc和css
<div id="dialog_div">
</div> </pre>
</body>
</html>
include.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function change(){ alert("hello");
}
</script>
<body>
<span style="color: red" onclick="change();">被包含的页面</span>
</body>
</html>
结果：
三、对话框传值
案例：本例在第四章网格的基础上实现用户信息的修改
- 数据库：
- index2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<%
String path = request.getContextPath();
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css"
href="<%=path%>/script/easyUI-1.4/themes/icon.css">
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>
</head> <script type="text/javascript">
jQuery(function() {
var tools=[
{id:"search",text:"根据id查询",iconCls:"icon-search",handler:function(){
var search_id=$("#search_id").val(); $('#dg').datagrid({
//queryParams方法在请求远程数据的时候发送额外的参数,参数一定要是json格式的对象，而表单序列化后是数组对象。需要将数组对象转为json格式的对象
queryParams: {
"search_id":search_id
}
}); }},
{id:"add",text:"新增用户",iconCls:"icon-add"},
{id:"update",text:"修改用户",iconCls:"icon-edit",handler:function(){ var selected=$('#dg').datagrid("getSelections");
if(selected==null || selected.length>1){
$.messager.alert("警告","你没有选择用户或者多选了","error");
}else{
var userObj=selected[0];
var userId=userObj.id;
var editURL="<%=path%>/servlet/editUser?userId="+userId+"";
jQuery("#dialog_div").dialog({ title: '修改用户',
width: 400,
height: 200,
minimizable:true,
maximizable:true,
content:"<iframe height='100%' weight='100%' scrolling='no' id='userFrame' name='userFrame' border='0' src='"+editURL+"'></iframe>",
modal : true,
buttons:[{
text:'保存',
handler:function(){
//获取iframe中修改后的用户信息数据并保存，通过获取iframe的id值
var userFrame=document.getElementById("userFrame");
var childWin=userFrame.contentWindow;
//注意：form表单一定要引入jquery包否则childWin.jQuery("#form1")方法不生效，
//且form的表单元素type=‘text’等元素必须要有name 属性，否则找不到
var childFormData=childWin.jQuery("#form1").serializeArray();
var saveURL="<%=path%>/servlet/saveUser";
jQuery.post(saveURL,childFormData,function(jsonData){
var flag=jsonData.flag; if(flag==true){
alert("修改成功"); $('#dg').datagrid("reload");
}else{
alert("修改失败,失败原因是:"+flag.errMes);
} },"json");
}
},{
text:'关闭',
handler:function(){
alert("关闭");
}
}] }); } }}
]; $('#dg').datagrid({
url:"<%=path%>/servlet/getDataGrid",
//开启分页
pagination : "true",
//设置分页工具栏位置
pagePosition : "bottom",
//设置分页间隔
pageList : [ 4, 8, 16 ],
pageSize : 4,
//是否从服务器对数据进行排序
remoteSort : true,
//定义顶部工具栏的DataGrid面板
toolbar : tools,
//定义网格的标题
title : "普通网格",
fitColumns : true,
columns : [ [
//定义列，这里有三列，每一列的都是一个对象，title为列标题，field为字段的名称
{
title : "",
field : "ck",
checkbox : true
}, {
title : "用户id",
field : "id",
//允许列使用排序,与表格中的remoteSort属性配合使用
//如果sortable:true，remoteSort也为true，则对表格中的所有数据排序
//如果sortable:true，remoteSort也为false，则对表格中的所有数据排序
sortable : true
}, {
title : "用户名",
field : "userName" }, {
title : "密码",
field : "passWord", formatter : function(value, row, index) {
if (value.length <= 6) {
return "<font color='red'>密码长度小于6位</font>";
} else {
return value;
}
} } ] ] });
});
</script> <body>
<h1>1.分页+排序+查询网格</h1>
<form id="form">
查询用户id:<input type="text" name="search_id" id="search_id">
</form> <table id="dg"></table>
<!-- 修改用户时的提示框 -->
<div id="dialog_div"></div>
</body>
</html>
- 获取网格数据的servlet：@WebServlet("/servlet/getDataGrid")
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
//获取查询条件
String searchId=request.getParameter("search_id");
PrintWriter out = response.getWriter();
Connection conn = null;
String sql = "select * from users where 1=1";
// 查询记录总数量的sql语句
String countSQL = "select count(*) from users"; // try {
conn = DBUtil.getConn();
QueryRunner queryRunner=new QueryRunner();
// 设置分页属性,page和rows是从前台传过来的参数，page指第几页，rows表示该页显示几条数据
int page=Integer.valueOf(request.getParameter("page"));
int rows=Integer.valueOf(request.getParameter("rows"));
//如果需要排序，则前台会传需要排序的列名sort和排序方式order。
String sortName=request.getParameter("sort");
String sortType=request.getParameter("order");
int startIndexx=0;
if(page==1){
startIndexx = 0;
}else{
startIndexx=0+(page-1)*rows;
} int endIndex = rows;
// 查询记录总数量
int count = getCount(countSQL); /**
* 有查询条件时的sql语句
*/ if(searchId!=null){
sql=sql+" and id= "+searchId+"";
} if(sortName!=null && sortType!=null){
//说明需要排序
sql = sql+" order by "+sortName+" "+sortType+" limit " + startIndexx + " , " + endIndex + " "; }else{
//不需要排序
sql = sql+" limit " + startIndexx + " , " + endIndex + " ";
} System.out.println(sql);
List<User> userList=queryRunner.query(conn, sql, new BeanListHandler<>(User.class));
List<Map<String, String>> gridDataList = new ArrayList<Map<String, String>>();
Map<String, Object> gridDataMap = new HashMap<String, Object>();
Map<String, String> columnMap = null;
for(User user:userList){ String id = (String.valueOf(user.getId()));
String userName = user.getUserName();
String passWord = user.getPassWord(); columnMap = new HashMap<String, String>();
columnMap.put("id", id);
columnMap.put("userName", userName);
columnMap.put("passWord", passWord);
gridDataList.add(columnMap);
}
gridDataMap.put("total", count);
gridDataMap.put("rows", gridDataList);
Gson gson = new Gson();
String str_gridData = gson.toJson(gridDataMap);
System.out.println(str_gridData);
out.print(str_gridData); } catch (Exception e) {
e.printStackTrace();
} out.flush();
out.close(); } /**
* 根据sql查询数据库中的总记录数量
*
* @param countSQL
* @return
*/
private int getCount(String countSQL) {
int res = 0;
Connection conn = null;
Statement stat = null;
ResultSet rs = null; try {
conn = DBUtil.getConn();
stat = conn.createStatement();
rs = stat.executeQuery(countSQL);
while (rs.next()) {
res = rs.getInt("count(*)"); } } catch (Exception e) {
e.printStackTrace();
} finally {
try {
conn.close();
rs.close();
stat.close();
} catch (Exception e2) {
e2.printStackTrace();
} } return res;
}
- 编辑用户的servlet ： @WebServlet("/servlet/editUser")
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
/**
* 拿到要修改用户的id
*/
String user_id=request.getParameter("userId");
String sql="select * from users where id="+user_id+"";
Connection conn=null;
Map<String,Object> userMap=new HashMap<String,Object>();
try {
conn=DBUtil.getConn();
QueryRunner queryRunner=new QueryRunner();
userMap=queryRunner.query(conn, sql, new MapHandler());
request.setAttribute("userMap", userMap);
} catch (Exception e) {
e.printStackTrace();
}
request.getRequestDispatcher("/edit.jsp").forward(request, response);
}
- 保存修改用户的servlet：@WebServlet("/servlet/saveUser")
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out=response.getWriter();
String userId=request.getParameter("userid");
String userName=request.getParameter("username");
String passWord=request.getParameter("password");
Connection conn=null;
Statement stat=null;
String sql=" update users set username='"+userName+"' , password='"+passWord+"' where id='"+userId+"'";
Map<String,Object> resMap=new HashMap<String,Object>();
try {
conn=DBUtil.getConn();
stat=conn.createStatement();
int res=stat.executeUpdate(sql);
if(res>0){
resMap.put("flag", true);
}
Gson gson=new Gson();
String res_json=gson.toJson(resMap);
out.print(res_json);
out.flush();
out.close();
} catch (Exception e) {
e.printStackTrace();
resMap.put("flag",false);
resMap.put("errMes", e.getMessage());
}
}
- 编辑用户的页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<% String path=request.getContextPath(); %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css"
href="<%=path%>/script/easyUI-1.4/themes/icon.css">
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript"
src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>
<title>Insert title here</title>
</head> <body class="easyui-layout">
<form id="form1" name="form1">
用户id:<input type="text" name="userid" value="${requestScope.userMap.id}">
用户名:<input type="text" name="username" value="${requestScope.userMap.userName}">
密码:<input type="text" name="password" value="${requestScope.userMap.passWord}">
</form> </body>
</html>
结果：
（六）easyUI之对话框窗口的更多相关文章
- easyui源码翻译1.32--Dialog（对话框窗口）
前言 扩展自$.fn.window.defaults.使用$.fn.dialog.defaults重写默认值对象.下载该插件翻译源码 该对话框是一种特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按 ...
- 窗口-EasyUI Window 窗口、EasyUI Dialog 对话框、EasyUI Messager 消息框
EasyUI Window 窗口 扩展自 $.fn.panel.defaults.通过 $.fn.window.defaults 重写默认的 defaults. 窗口(window)是一个浮动的.可拖 ...
- easyUI之Dialog（对话框窗口）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 第二百零三节，jQuery EasyUI，Window(窗口)组件
jQuery EasyUI,Window(窗口)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件 ...
- JS框架_(Popup.js)3D对话框窗口插件
百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...
- EasyUI 中点击取消按钮关闭Dialog（对话框窗口）
<div id="dl1" class="easyui-dialog" title="窗口"style="width:400 ...
- 六、pyqt5对话框——QInputDialog、QColorDialog、QFontDialog、QMessageBox、QFileDialog
目录: 一.对话框综合示例 二.QDialog 三.QInputDialog 四.QMessageDialog 五.QFileDialog pyqt5的对话框有多种类型,比如输入对话框(QInput ...
- EasyUI弹出窗口实例
效果体验:http://hovertree.com/texiao/jeasyui/1.htm 源代码下载:HovertreeJEasyUI HTML文件代码: <!DOCTYPE html> ...
- easyui 动态修改窗口title
http://blog.csdn.net/liu251890347/article/details/39292307?utm_source=tuicool 使用easyui作为前台框架极大的节省了项目 ...
随机推荐
- 利用iis创建网站后为什么不能设置主机名
主机名 主机名就是网站的域名,通俗说就是网站地址(如:www.baidu.com). 设置了主机名,而IIS确不知道主机名对应的地址在哪里. 举个例子,把www.baidu.com做为IIS网站的主机 ...
- LDAP的filter查询详解
转: 等于(EQUAL TO): =大于等于(Greater than): >=小于等于(Less than): <=通配符(wildcard): * 逻辑运算符:逻辑与(log ...
- 如何获取UA？
代码: function whatBrowser() { document.Browser.Name.value = navigator.appName; document.Browser.Versi ...
- python wmi远程数据获取
- vue-cli项目中使用全局过滤器及传参(日期格式化)
// 过滤日期格式,传入时间戳,根据参数返回不同格式 const formatTimer = function(val, hours) { if (val) { ); var y = dateTime ...
- VSCode 代码格式化 快捷键
Visual Studio Code可以通过以下快捷键 格式化代码: On Windows Shift + Alt + F On Mac Shift + Option + F On Ubuntu ...
- web手工项目03-登录功能测试用例及缺陷编写-流程图画法-前后台下单及发货流程图-流程图设计测试用例方法-功能测试涉及到的四种数据库场景
回顾 注册功能测试(步骤,需求分析(输入分析,处理分析,输出分析),数据构造(有效等价类,无效等价类,有效数据,无效数据),编写用例,执行用例,缺陷报告) 轮播图功能测试(步骤,需求分析拆分测试点,测 ...
- mycat 实现读写分离
mycat 实现读写分离 配置mysql实现主从复制 安装jdk 安装mycat实现读写分离 tar zxf Mycat-server-1.6-RELEASE-20161028204710-sangn ...
- shell脚本安装python、pip--交互式的
首先把pip-.tgz 安装包放在 /usr/local 下面,按照顺序先安装pip,再安装python.不要先安装或只安装python,否则很容易出错, [root@bogon ~]# cat pi ...
- win7下安装IIS7
在Windows 7下如何安装IIS7,以及IIS7在安装过程中的一些需要注意的设置,以及在IIS7下配置ASP的正确方法. 在Windows 7下面IIS7的安装方法: 一.进入Windows 7的 ...