基于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");
        }
相关文章
|
1月前
|
Web App开发 API
通过html页面方式访问www.iximo.com的方式(原创)
通过html页面方式访问www.iximo.com的方式(原创)
25 2
|
22天前
404错误页面源码,简单实用的html错误页面模板
小编精心准备一款404错误页面源码,简单实用的html错误页面模板,简单大气的页面布局,可以使用到不同的网站中,相信大家一定会喜欢的
15 2
404错误页面源码,简单实用的html错误页面模板
|
19天前
|
Web App开发 监控 JavaScript
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。 分为以下几点: 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似   字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
14 1
|
4天前
|
JavaScript 前端开发 算法
[练习]用Js获取html页面中表单提交的数据并且返回到控制台
[练习]用Js获取html页面中表单提交的数据并且返回到控制台
7 0
|
5天前
|
Java
杨校老师课堂之Html页面快速转为jsp页面之工具类【简直太简单好用】
杨校老师课堂之Html页面快速转为jsp页面之工具类【简直太简单好用】
7 0
|
28天前
|
Web App开发 编解码 移动开发
HTML页面关于高分屏的设置
该文章讲述了HTML页面在高分屏环境下遇到的问题,主要涉及`window.innerWidth`和`window.innerHeight`等参数返回物理设备宽度而非实际像素宽度,导致Chrome和Firefox在PC及Android端表现不一致。为解决兼容性问题,文章建议在HTML头部添加`viewport`元标签,设置`width=device-width, initial-scale=1.0`,以确保适配不同设备的高分屏。
|
1月前
|
移动开发 网络协议 安全
HTML5页面被运营商DNS问题及解决方案,app中h5页面源码的获取
HTML5页面被运营商DNS问题及解决方案,app中h5页面源码的获取
86 4
|
1月前
|
机器人
机器人飞船404页面模板HTML源码
机器人飞船404页面模板HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
30 5
机器人飞船404页面模板HTML源码
|
27天前
|
前端开发
html编写登录页面练习
html编写登录页面练习
27 0
|
27天前
html编写注册页面
html编写注册页面
27 0