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

当前位置 : 首页 > 网页制作 > CSS > 模态窗口window.showModalDialog的应用实例

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

来源: 作者: 时间:2016-01-28 09:27
需求:当在查询页面查询到后台数据后,在查询页面点击更新按钮后,弹出一个模式窗口。在该模式窗口中得到更新之前各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.',{"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.执行更新功能的模态窗口子页面关键代码:
[]  
<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;  
    }  
 
Tag:
网友评论

<