Jquery easyUI dialog的close和destroy

来源：互联网发布：ai作图软件编辑：程序博客网时间：2024/06/04 17:57

之前在用easyUI的时候遇到一个问题，一直困扰着我。

问题：

使用dialog来实现保存和编辑框，使用dialog.(“close”)来关闭dialog框，这个时候如果有两个页面的保存页面的表单的字段相同时，这两个表单的东西就会混乱。要不就是保存时打不开，要不就是编辑页面打开数据初始化不了。

解决思路：

使用close的方法来关闭dialog时，此dialog并不是完全消失，只是隐藏起来了而已。当另外一个dialog和这个dialog相同时，就会发生混乱。所以我们不适用close的方法来关闭dialog，使用destroy来销毁dialog，当使用destroy时，如果页面上显式定义了dialog的话，关闭后就永远都打不开了。所以我们不显式定义dialog，并且把保存页面和列表页面分开。

解决代码如下：
list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ page import="com.ourpalm.resupgrade.bean.GmMenu"%><%@ page import="com.ourpalm.resupgrade.bean.GmModule"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><%    String path = request.getContextPath();    request.setAttribute("path", path);    String basePath = request.getScheme() + "://"            + request.getServerName() + ":" + request.getServerPort()            + path + "/";%><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title><fmt:message key="resourceUploadGM" /></title><link rel="stylesheet" type="text/css"    href="<%=path%>/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="<%=path%>/themes/icon.css"><script type="text/javascript" src="<%=path%>/js/jquery-1.8.0.min.js"></script><script type="text/javascript" src="<%=path%>/js/jquery.easyui.min.js"></script><fmt:setLocale value="${local}" /><fmt:setBundle basename="applicationMessage" /></head><body>    <table id="dgResource" class="easyui-datagrid" fit="true" url=""        toolbar="#toolbar" pagination="true" rownumbers="true"        fitColumns="true" singleSelect="true" pageSize="15"        pageList="[15,20,25,30,35]">        <thead>            <tr>                <th data-options="field:'id',width:20,align:'center'">id</th>                <th data-options="field:'resourcePath',width:40,align:'center'"><fmt:message                        key="resourceFileName" /></th>            </tr>        </thead>        <tr></tr>    </table>    <div id="toolbar" style="padding: 5px; height: auto">        <div style="margin-bottom: 5px">            <a href="javascript:void(0)" class="easyui-linkbutton"                iconCls="icon-add" plain="true" onclick="newResource()"><fmt:message                    key="add" /></a> <a href="javascript:void(0)"                class="easyui-linkbutton" iconCls="icon-edit" plain="true"                onclick="editResource()"><fmt:message key="edit" /></a> <a                href="javascript:void(0)" class="easyui-linkbutton"                iconCls="icon-remove" plain="true" onclick="destroyResource()"><fmt:message                    key="delete" /></a> <a href="javascript:void(0)"                class="easyui-linkbutton" iconCls="icon-remove" plain="true"                onclick="UpdateResourceBeansProduced()"><fmt:message                    key="flushcatch" /></a>        </div>    </div>    <script type="text/javascript">        $("#dgResource").datagrid({            url : "${path}/resourceServlet.do?method=search&fromFlg=lodad"        });        function editResource() {            var row = $('#dgResource').datagrid('getSelected');            if (row) {                $('<div></div>').dialog({                    id : 'newDialog',                    title : 'My Dialog',                    width : 800,                    height : 600,                    closed : false,                    cache : false,                    href : '${path}/view/gmtool/resource_save.jsp',                    modal : true,                    onLoad : function() {                        //初始化表单数据                    },                    onClose : function() {                        $(this).dialog('destroy');                    },                    buttons : [ {                        text : 'OK',                        iconCls : 'icon-ok',                        handler : function() {                            //提交表单                        }                    }, {                        text : 'CANCEL',                        iconCls : 'icon-cancel',                        handler : function() {                            $("#newDialog").dialog('destroy');                        }                    } ],                });            }        }    </script></body></html>

save.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ page import="com.ourpalm.resupgrade.bean.GmMenu"%><%@ page import="com.ourpalm.resupgrade.bean.GmModule"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><%    String path = request.getContextPath();    request.setAttribute("path", path);    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title><fmt:message key="resourceUploadGM" /></title><link rel="stylesheet" type="text/css" href="<%=path%>/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="<%=path%>/themes/icon.css"><script type="text/javascript" src="<%=path%>/js/jquery-1.8.0.min.js"></script><script type="text/javascript" src="<%=path%>/js/jquery.easyui.min.js"></script><fmt:setLocale value="${local}" /><fmt:setBundle basename="applicationMessage" /></head><body>    <div class="ftitle">        <fmt:message key="resourceinformation" />    </div>    <form id="fmResource" method="post" novalidate>        <div style="display: none;">            <input name="id" id="id" value="">        </div>        <div class="fitem">            <label class="rightalign"><fmt:message key="resourceFileName" />:</label>            <input name="resourcePath" id="resourcePath"                class="easyui-validatebox" required="true">        </div>    </form>    <script type="text/javascript">    </script></body></html>

0 0