您现在的位置:首页 >> 前端 >> 内容

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

时间:2013/11/13 9:40:03 点击:

  核心提示:需求:当在查询页面查询到后台数据后,在查询页面点击更新按钮后,弹出一个模式窗口。在该模式窗口中得到更新之前各input标签的值。修改完毕点击提交时关闭该模态窗口,同时刷新父窗口(查询窗口)的内容。下面...
需求:当在查询页面查询到后台数据后,在查询页面点击更新按钮后,弹出一个模式窗口。在该模式窗口中得到更新之前各input标签的值。修改完毕点击提交时关闭该模态窗口,同时刷新父窗口(查询窗口)的内容。下面是流程。

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

2.查询页面关键代码:

[html]  

<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> <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.执行更新功能的模态窗口子页面关键代码:

[html]  

<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对象对当前页面打印一个标志性的字符串,用于判断更新是否成功。代码如下:

[java]  

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;  

    }  

 

作者:网络 来源:不详