基于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");
        }
相关文章
|
6月前
简约404错误页面HTML源码
简约404错误页面HTML源码
228 12
|
9月前
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
511 77
|
9月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
379 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
8月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
221 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
9月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
228 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
9月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
161 34
|
11月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
391 7
|
11月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
640 11
|
11月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
180 2
|
11月前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
278 0