（六）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>
结果：
