Jquery easyUI dialog的close和destroy
之前在用easyUI的时候遇到一个问题，一直困扰着我。
问题：
使用dialog来实现保存和编辑框，使用dialog.(“close”)来关闭dialog框，这个时候如果有两个页面的保存页面的表单的字段相同时，这两个表单的东西就会混乱。要不就是保存时打不开，要不就是编辑页面打开数据初始化不了。
解决思路：
使用close的方法来关闭dialog时，此dialog并不是完全消失，只是隐藏起来了而已。当另外一个dialog和这个dialog相同 时，就会发生混乱。所以我们不适用close的方法来关闭dialog，使用destroy来销毁dialog，当使用destroy时，如果页面上显式 定义了dialog的话，关闭后就永远都打不开了。所以我们不显式定义dialog，并且把保存页面和列表页面分开。
解决代码如下：
list.aspx
<%@ 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.aspx
<%@ 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> 相关推荐
apowerfulman 2020-03-03
hustlei 2011-03-03
Mexican 2011-08-31
larrywangsun 2011-08-09
TTHHVV 2011-09-28
87384559 2014-11-11
xuewenke 2015-11-04
火星的你 2015-10-25
王磊的程序员之路 2019-06-19
十一郎的IT 2013-10-29
攻城师 2019-06-28
SinhaengHhjian 2015-11-04
sunnylinner 2014-11-11
jquery easyui dialog可以两种方式使用1)定义div,使用iframe<div id="openRoleDiv" class="easyui-window" closed="true
无情 2014-09-20
hanliuxinming 2014-05-30