一、拥有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之对话框窗口的更多相关文章

  1. easyui源码翻译1.32--Dialog(对话框窗口)

    前言 扩展自$.fn.window.defaults.使用$.fn.dialog.defaults重写默认值对象.下载该插件翻译源码 该对话框是一种特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按 ...

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

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

  3. easyUI之Dialog(对话框窗口)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  4. 第二百零三节,jQuery EasyUI,Window(窗口)组件

    jQuery EasyUI,Window(窗口)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件 ...

  5. JS框架_(Popup.js)3D对话框窗口插件

    百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...

  6. EasyUI 中点击取消按钮关闭Dialog(对话框窗口)

    <div id="dl1" class="easyui-dialog" title="窗口"style="width:400 ...

  7. 六、pyqt5对话框——QInputDialog、QColorDialog、QFontDialog、QMessageBox、QFileDialog

    目录:  一.对话框综合示例 二.QDialog 三.QInputDialog 四.QMessageDialog 五.QFileDialog pyqt5的对话框有多种类型,比如输入对话框(QInput ...

  8. EasyUI弹出窗口实例

    效果体验:http://hovertree.com/texiao/jeasyui/1.htm 源代码下载:HovertreeJEasyUI HTML文件代码: <!DOCTYPE html> ...

  9. easyui 动态修改窗口title

    http://blog.csdn.net/liu251890347/article/details/39292307?utm_source=tuicool 使用easyui作为前台框架极大的节省了项目 ...

随机推荐

  1. 利用iis创建网站后为什么不能设置主机名

    主机名 主机名就是网站的域名,通俗说就是网站地址(如:www.baidu.com). 设置了主机名,而IIS确不知道主机名对应的地址在哪里. 举个例子,把www.baidu.com做为IIS网站的主机 ...

  2. LDAP的filter查询详解

    转: 等于(EQUAL TO):  =大于等于(Greater than):  >=小于等于(Less than):  <=通配符(wildcard):  *  逻辑运算符:逻辑与(log ...

  3. 如何获取UA?

    代码: function whatBrowser() { document.Browser.Name.value = navigator.appName; document.Browser.Versi ...

  4. python wmi远程数据获取

  5. vue-cli项目中使用全局过滤器及传参(日期格式化)

    // 过滤日期格式,传入时间戳,根据参数返回不同格式 const formatTimer = function(val, hours) { if (val) { ); var y = dateTime ...

  6. VSCode 代码格式化 快捷键

    Visual Studio Code可以通过以下快捷键 格式化代码: On Windows  Shift + Alt + F On Mac  Shift + Option + F On Ubuntu ...

  7. web手工项目03-登录功能测试用例及缺陷编写-流程图画法-前后台下单及发货流程图-流程图设计测试用例方法-功能测试涉及到的四种数据库场景

    回顾 注册功能测试(步骤,需求分析(输入分析,处理分析,输出分析),数据构造(有效等价类,无效等价类,有效数据,无效数据),编写用例,执行用例,缺陷报告) 轮播图功能测试(步骤,需求分析拆分测试点,测 ...

  8. mycat 实现读写分离

    mycat 实现读写分离 配置mysql实现主从复制 安装jdk 安装mycat实现读写分离 tar zxf Mycat-server-1.6-RELEASE-20161028204710-sangn ...

  9. shell脚本安装python、pip--交互式的

    首先把pip-.tgz 安装包放在 /usr/local 下面,按照顺序先安装pip,再安装python.不要先安装或只安装python,否则很容易出错, [root@bogon ~]# cat pi ...

  10. win7下安装IIS7

    在Windows 7下如何安装IIS7,以及IIS7在安装过程中的一些需要注意的设置,以及在IIS7下配置ASP的正确方法. 在Windows 7下面IIS7的安装方法: 一.进入Windows 7的 ...