`

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>

 

0
0
分享到:
评论

相关推荐

    jquery easyui datagrid demo

    这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档,帮助我们理解和应用 Datagrid。 首先,`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档,它...

    初试JqueryEasyUI(附Demo)

    2. **UI 组件**: jQuery EasyUI 提供了诸如对话框(dialog)、表格(datagrid)、下拉框(combobox)、树形控件(tree)、菜单(menu)等常见的 UI 组件,这些组件都封装了复杂的交互逻辑和样式,使得开发者无需关心...

    jqueryEasyUI

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,使得开发者能够快速...在实际项目中,熟练掌握 jQuery EasyUI 的使用技巧和 API,对于提升工作效率至关重要。

    jquery easyui 帮助文档

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了丰富的组件和功能。这个“jQuery EasyUI 帮助文档”包含了全面的API参考和使用指南,对于开发者来说是极具价值的资源。 jQuery ...

    jQuery EasyUI的api

    - **打开与关闭**: 对于可关闭的组件如`dialog`,`$(selector).dialog('open')`和`$(selector).dialog('close')`用于打开和关闭。 7. **组件属性调整**: - **尺寸调整**: 可以通过`$(selector).pluginName('...

    jquery easyUi使用文档pdf 和 word版本

    这份 PDF 文档通常包含详尽的介绍和示例,涵盖了 jQuery EasyUI 的主要组件和使用方法。可能包括以下内容: 1. **基本概念**:解释 jQuery EasyUI 的核心理念,如 MVC 模式,以及如何与后端数据进行交互。 2. **...

    jQuery EasyUI 1.5.1 版 API 中文版

    2. **组件详解**:jQuery EasyUI 提供了许多组件,如 `datagrid`(数据网格)、`dialog`(对话框)、`menu`(菜单)、`tabs`(选项卡)、`tree`(树形结构)和`form`(表单)。每个组件都有详细的配置选项、方法和...

    jQuery EasyUI v1.3.5官方API中文版

    jQuery EasyUI 是一款非常棒的WEB前端UI框架,很多朋友都在找jQuery EasyUI API 中文文档,本次给大家提供的就是jQuery EasyUI v1.3.5官方API中文版,有需要的拿去用吧

    jQuery EasyUI 1.9.4 chm文档

    针对jQuery EasyUI的1.9.0的在线帮助文档进行整理,生成chm文件,便于开发时或者离线对easyi控件的属性、文法、事件等内容的查看。

    ssm+jqueryeasyui案例

    jQuery EasyUI则是一个基于jQuery的UI库,提供了丰富的组件和易于使用的API,用于快速构建现代、响应式的Web应用界面。 在这个"ssm+jqueryeasyui案例"中,我们可以学习如何将这三者结合,构建出功能完善的Web应用。...

    jQuery EasyUI 参考资源合集

    首先,`jQuery EasyUI1.2 API文档.CHM` 是一个帮助文件,它详细列出了 jQuery EasyUI 1.2 版本的所有 API 和方法。CHM 文件是一种常见的 Windows 帮助文档格式,里面包含索引、搜索功能,方便用户查找和理解各种组件...

    jquery easyui + Ztree +折线图

    例如,如果你已经掌握了jQuery和EasyUI,那么可以进一步学习如何使用这些图表库与EasyUI集成,为你的应用添加数据可视化的功能。 在实际项目中,jQuery EasyUI、ZTree和折线图的组合可以创建出复杂的管理界面。比如...

    jQuery EasyUI v1.10.0.zip

    使用jQuery EasyUI可以极大地提高开发效率,因为它提供了丰富的预定义样式和交互效果,让开发者无需关心底层实现,只需关注业务逻辑和数据处理。通过结合HTML、CSS和JavaScript,可以快速搭建出美观且功能齐全的用户...

    SSH+Jquery easyUI后台管理系统

    SSH+jQuery EasyUI后台管理系统是一种基于Struts2(S)、Spring(S)和Hibernate(H)三大开源框架的Web应用程序开发模式,结合jQuery EasyUI前端框架,构建出高效、简洁且具有现代感的后台管理界面。这个系统设计的...

    jQueryEasyUI1.3.6版本

    1. **组件库**:jQuery EasyUI 提供了多种UI组件,如对话框(Dialog)、表单(Form)、表格(Grid)、树形视图(Tree)、下拉菜单(Menu)等。这些组件都有完整的API和丰富的样式,可以满足开发各种类型Web应用的...

    jQuery easyui 全套文件

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它简化了网页界面的构建,提供了一系列易于使用的组件和插件,使得开发者能够快速构建出美观、功能丰富的用户界面。这个压缩包包含的是 jQuery EasyUI 的全套文件...

    Jquery EasyUI 日历Demo

    JQuery EasyUI 是一个基于 jQuery 的轻量级前端框架,它提供了一系列的 UI 组件,如对话框、表格、树形菜单、按钮等,用于快速构建用户界面。在这个"Jquery EasyUI 日历Demo"中,我们将探讨如何利用 EasyUI 的日历...

    jQuery EasyUI EasyUI 组件范例

    根据提供的文件信息,本文将详细解释与“jQuery EasyUI”相关的知识,特别是“EasyLoader”组件的使用方法及其在实际项目中的应用场景。...希望本文对理解和使用 jQuery EasyUI 中的 EasyLoader 组件有所帮助。

    李炎恢jQuery EasyUI讲义代码

    jQuery EasyUI提供了许多预定义的组件,如面板(Panel)、表单(Form)、菜单(Menu)、对话框(Dialog)等,这些在实际开发中都极其常见。讲义将逐步解释如何配置和使用这些组件,使你可以轻松地构建出复杂的页面...

    Jqueryeasyui使用说明

    资源名称:Jquery easyui 使用说明内容简介:Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的...

Global site tag (gtag.js) - Google Analytics