模态窗口window.showModalDialog的应用实例


需求:当在查询页面查询到后台数据后,在查询页面点击更新按钮后,弹出一个模式窗口。在该模式窗口中得到更新之前各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;
	}


你可能感兴趣的:(showModalDialog)