基于Html对父页面打开子页面Dialog()的使用

简介: 作者在使用基于QUI的前端项目中遇到一个问题:无法在Dialog组件中提交后刷新列表页面。经过搜索和努力,找到了解决方案。通过创建新的`top.Dialog()`,设置相关属性如标题、URL、尺寸,并在OK事件中调用子页面的提交方法及刷新列表的方法实现了需求。提供的代码示例展示了如何打开编辑窗体并处理提交事件以刷新列表。

1、背景:

作者在写项目的时候,遇到了一个很坑的问题,项目前端基于QUI,但是大部分是js + css实现。

有一个功能:列表页面使用Dialog()组件打开编辑、新增窗体,编辑、新增窗体点击提交关闭窗体,能够刷新列表页面,无论怎么百度就是找不到可以实现的方法,最终功夫不负有心人,终于找到了一种可以实现编辑窗体点击提交之后,刷新列表页面,接下来分享给大家。

2、代码实现

// 点击编辑按钮,打开窗体
function showEdit(code) {
     // 原来实现方式
// top.Dialog.open({ URL: basePath + "/xxx/xxxEdit?code="+code, Title: "修改", Width: 1000, Height: 1000 });
var diag = new top.Dialog();
// 窗体的名字
                diag.Title = "修改";
// url
                diag.URL = basePath + "/xxx/xxxEdit?code="+code ;
                diag.Width = 1000;
                diag.Height = 800;
// OK按钮的命名
                diag.OkButtonText = "提交";
// 顺序很重要,diag.show()之前添加确定按钮事件,show之后添加新按钮
                diag.OKEvent = function () {
// 点击提交,调用子页面提交的方法
                    diag.innerFrame.contentWindow.submitHandler();
// 列表页面刷新方法
getData2();
                };
                diag.show();
        }
    // 父页面(列表页面)加载数据的方法
function getData2() {
            $.post(basePath + "/xxx/GetXxxList",
getParameter(),
function (result) {
                    gridData = result;
//刷新表格
                    g.loadData(gridData);
                }, "json");
        }
相关文章
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
26天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
54 7
|
1月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
66 11
|
25天前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
49 0
|
1月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
55 2
|
1月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
38 0
|
2月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
43 1
|
3月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
54 6
|
2月前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `<html>`, `<head>`, `<body>` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
83 0
|
2月前
|
XML Web App开发 数据格式
HTML 页面显示 XML 数据
10月更文挑战第2天