需求:当在查询页面查询到后台数据后，在查询页面点击更新按钮后，弹出一个模式窗口。在该模式窗口中得到更新之前各input标签的值。修改完毕点击提交时关闭该模态窗口，同时刷新父窗口(查询窗口)的内容。下面是流程。
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;
}