编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

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

作者:许助云  发布日期:2013-11-11 21:07:48
  • 收藏本文    我要投稿
  • 需求:当在查询页面查询到后台数据后,在查询页面点击更新按钮后,弹出一个模式窗口。在该模式窗口中得到更新之前各input标签的值。修改完毕点击提交时关闭该模态窗口,同时刷新父窗口(查询窗口)的内容。下面是流程。

    1.我是用struts2标签遍历得到后台数据的。首先得引入struts2标签<%@ taglib prefix="s" uri="/struts-tags"%>

    2.查询页面关键代码:


    <SPAN style="COLOR: #cc0000"><script type="text/javascript" src="js/jquery-1.6.4.min.js"></script></SPAN>
    <script type = "text/javascript">
    <SPAN style="COLOR: #cc0000">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");
    }</SPAN>
    <SPAN style="COLOR: #cc0000">function refresh(){//此刷新函数被弹出的子模态窗口调用。
    	window.location.href = "findEmployee.action";
    }</SPAN>
    </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>
    					<SPAN style="COLOR: #cc0000"><td><a href="" onclick="update(<s:property value='id' />,'<s:property value='name' />','<s:property value='address' />','<s:property value="phone" />')">更新</a>&nbsp;<a href="javascript:if(confirm('确认删除?')){window.location.href='deleteEmployee.action?id=<s:property value="id" />'}">删除</a>
    					</td></SPAN>
    				</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;
    	}

     

延伸阅读:

Tag标签:window.showModalDialog  
  • 专题推荐