Jquery easyUI dialog的close和destroy

阿新 • • 發佈：2019-01-14

之前在用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>

Jquery easyUI dialog的close和destroy

JQuery EasyUI屬性和常見用法

Jquery EasyUI Dialog close和destroy方法

Jquery easyUI dialog的close和destroy

使用Struts2和jQuery EasyUI實現簡單CRUD系統（五）——jsp,json,EasyUI的結合

easyUI dialog的close和destroy區別

jQuery easyui dataGrid 動態改變排序欄位名，一般情況下，在使用的時候，我們會點選相應欄位進行排序，這裡以JAVA為例，後端的實體類欄位有可能和資料庫的欄位不一致；如：實體類中的

jQuery EasyUI中window/dialog 視窗摺疊和展開方法（顯示）

當使用EasyUI時,需要的Field屬性是子屬性時候,除了formatter和修改jquery.easyui.min.js的方法

jQuery EasyUI詳解-EasyUI佈局和標籤頁

JQuery EasyUI datagrid 批量編輯和提交

使用Struts2和jQuery EasyUI實現簡單CRUD系統（八）——Struts與EasyUI使用JSON進行互動

loadrunner 壓力測試平均響應時間20秒 100使用者併發 jquery.easyui.min.js 和jquery.js佔用時間最長

jquery easyUi 在日期控制元件裡面獲取值和賦值的方法

jquery easyui layout 怎樣新增和刪除面板

Mybatis-Plus和jQuery EasyUi學習總結

Jquery對象和DOM對象的區別

動態控制jQuery easyui datagrid工具欄顯示隱藏

自己在項目中寫的一個Jquery插件和Jquery tab 功能

jquery easyui的使用

jquery easyui grid 表格特殊字符處理

Jquery easyUI dialog的close和destroy

相關推薦