模态窗口window.showModalDialog的应用实例
2013-11-11 10:30
218 查看
需求:当在查询页面查询到后台数据后,在查询页面点击更新按钮后,弹出一个模式窗口。在该模式窗口中得到更新之前各input标签的值。修改完毕点击提交时关闭该模态窗口,同时刷新父窗口(查询窗口)的内容。下面是流程。
1.我是用struts2标签遍历得到后台数据的。首先得引入struts2标签<%@ taglib prefix="s" uri="/struts-tags"%>
2.查询页面关键代码:
3.执行更新功能的模态窗口子页面关键代码:
4.action里面通过out对象对当前页面打印一个标志性的字符串,用于判断更新是否成功。代码如下:
1.我是用struts2标签遍历得到后台数据的。首先得引入struts2标签<%@ taglib prefix="s" uri="/struts-tags"%>
2.查询页面关键代码:
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type = "text/javascript"> function update(id,name,address,phone){//定义一个函数传入表单的四个参数 //alert(phone); window.showModalDialog('update.jsp',{"id":id,"name":name,"address":address,"phone":phone},"dialogWidth=400px;dialogHeight=400px;dialogLeft=10;dialogTop=145"); } function refresh(){//此刷新函数被弹出的子模态窗口调用。 window.location.href = "findEmployee.action"; } </script> </head> <body> <center> <h1>查询雇员信息</h1> <hr> <table border="1" class="datalist"> <tr class="altrow"> <td>姓名</td> <td>住址</td> <td>电话</td> <td align="center">操作</td> </tr> <s:iterator value="#request.list"> <tr> <td><s:property value="name" /></td> <td><s:property value="address" /></td> <td><s:property value="phone" /></td> <td><a href="" onclick="update(<s:property value='id' />,'<s:property value='name' />','<s:property value='address' />','<s:property value="phone" />')">更新</a> <a href="javascript:if(confirm('确认删除?')){window.location.href='deleteEmployee.action?id=<s:property value="id" />'}">删除</a> </td> </tr> </s:iterator> <tr><td colspan = "4" align ="center"><a href = "addEmp.jsp">添加雇员信息</a></td></tr> </table> <hr> </center> </body>
3.执行更新功能的模态窗口子页面关键代码:
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> </head> <script type="text/javascript"> $(function() { var id = window.dialogArguments.id; //模态窗口通过window.dialogArguments获取父窗体传递过来的参数 var name = window.dialogArguments.name; var address = window.dialogArguments.address; var phone = window.dialogArguments.phone; $("title").html("修改ID编号为" + id + "的信息");//给标题赋值 $("input[name='id']").val(id); //给各个文本框赋修改之前的值 $("input[name='name']").val(name); $("input[name='address']").val(address); $("input[name='phone']").val(phone); //点击事件 $("#button1").click(function() { var id1 = $("#myid").val(); //得到修改后各个文本框的值 var name1 = $("#myname").val(); var address1 =$("#myaddress").val(); var phone1 = $("#myphone").val(); $.get("updateEmployee.action",{"id":id1,"name":name1,"address":address1,"phone":phone1},function(data){//执行action if(data.indexOf("true")>-1){ //判断返回的字符串中是否包含true window.opener.refresh(); //调用父窗体中定义的刷新方法从而刷新父窗体 window.close(); //关闭本页面 }else{ alert("error"); } },"text"); }); }); </script> <body> <center> <h1>更新操作</h1> <hr> <form action="updateEmployee.action" method="post" id="form1" name="form1"> <table border=1> <tr> <td align="right">ID编号</td> <td><input value="${param.id }" name="id" id="myid"></td> </tr> <tr> <td align="right">用户名</td> <td><input type="text" value="${param.name}" name="name" id="myname"> </td> </tr> <tr> <td align="right">用户住址</td> <td><input type="text" value="${param.address }" name="address" id="myaddress"> </td> </tr> <tr> <td align="right">用户电话</td> <td><input type="text" value="${param.phone }" name="phone" id="myphone"> </td> </tr> <tr> <td colspan="2" align="center"><input type="button" value="更新" id="button1"> <input type="reset" value="重置"> </td> </tr> </table> </form> </center> </body>
4.action里面通过out对象对当前页面打印一个标志性的字符串,用于判断更新是否成功。代码如下:
public void update() { HttpServletResponse response = ServletActionContext.getResponse(); PrintWriter out; try { out = response.getWriter(); employ = new Employee(id,name, address, phone); System.out.println("=============="+employ); boolean result = emp.update(employ); System.out.println(result); if (result) { out.print("true"); //return SUCCESS; } } catch (IOException e) { e.printStackTrace(); } //return ERROR; }
相关文章推荐
- I2C总线原理及应用实例
- 文档显示部件:用word查看方法在word中直接显示文档显示部件中的内容,并可以设置是否允许修改word内容。 True:不允许修改word内容;false:允许修改word内容。 实例应用:在窗体
- Android应用中通过AIDL机制实现进程间的通讯实例
- YARN RPC应用实例(1)
- Ajax简要应用说明及技术开发实例
- Delphi中For In 语法应用实例
- C#银行系统中国大学生mooc网 慕课《c#程序设计》(唐大仕)第三讲面向对象的c#语言 应用实例–银行系统的改进
- python的实例应用
- Java自带的线程池ThreadPoolExecutor详细介绍说明和实例应用
- Android应用中通过AIDL机制实现进程间的通讯实例
- 医疗行业大数据应用实例
- js运动应用实例解析
- 窃取QQ中社会工程学的应用实例
- 栈的应用实例
- 使用微信小程序开发弹出框应用实例详解
- Android应用底部导航栏(选项卡)实例
- docker——cgroup限制的应用实例
- php pack、unpack、ord 函数使用方法(二进制流接口应用实例)
- Apache的应用实例之访问控制、个人WEB空间