【WEB前端开辟】layui之弹出层封闭和革新题目

layui框架是一款采纳本身模块范例编写的前端UI框架,遵照原生HTML/CSS/JS的誊写与组织形式,本文我们就来看一下layui框架中关于弹出层封闭和革新的题目。

形貌:

主页面,弹出第一个弹框,第一个弹框中在弹出第二个弹框,如图:

1是主页面,2是子弹窗,3是孙弹窗

功用一:好了,第一个我要完成的功用是点击弹窗3的肯定以后封闭弹窗3

上js代码,先贴出如安在主页面1中弹出弹窗2的代码:

//弹窗2(代码写在主页面1)
function edit() {

var index = layer.open({//占坑!!!
            type : 2,
            title : "预算目的编辑",
            content : "/xx/xx/xx/edit?year=" + year
                    + "&departmentCode=" + departmentCode,
            area : [ "90%", "90%" ],
        });

}

接着贴出如安在弹窗2中弹出弹窗3的:

//弹窗3(js代码写在弹窗2中)

function configuration(){
    parent.layer.open({//占坑!
        type: 2,
        title: "设置项目",
        content: "/xx/xx/xx/xx?budgetMainCode="+budgetMainCode,
        area: ["80%", "80%"],
        end: function () {//点睛之笔,此端代码就是精华的地方,layui监听到弹窗3的烧毁以后回调了一个end函数,经由过程这个end函数我们就可以革新弹窗2的数据
            refreshTable()//就比方这refreshTable()是弹窗2内里的用于拼接数据列表的函数
} }); }
//肯定(代码写在弹窗3中)
//弹窗3中的js代码,就是最上面谁人图中的肯定按钮的函数

function comfirm(){
     //猎取checkbox[name='check']的值
     var arr = new Array();
     $("input:checkbox[name='check']:checked").each(function(i){
           arr[i] = $(this).val();
     });   
    $.ajax({
        type: "post",
        dataType: 'json',
        url: "/xx/xx/xx/checkChoise?budgetMainCode="+budgetMainCode,
        contentType: 'application/json',
        data: JSON.stringify(arr),
        success: function (result) {//点击肯定按钮以后,背景营业代码出来胜利以后的回调
            if (result.status == 0) {
                parent.layer.close(parent.layer.index);//依据前面怎样弹出弹窗来挑选索引去封闭弹窗,比方前面弹窗3是经由过程parent.layer.open弹出来的,
                                    那末我就猎取它的索引,并将它封闭,占坑!!!
            }
            if (result.message != null) {
                layer.msg(result.message)
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.msg('{"status":"' + XMLHttpRequest.status + '","readyState":"' + XMLHttpRequest.readyState + '","textStatus":"' + textStatus + '","errorThrown":"' + errorThrown + '"}')
        }
    })
}

功用二:

需求是点击弹窗3的某一条数据的“项目模板”然后选好该条模板在背景把这条模板插进去到别的一个表内里

,这内里的别的一个表指的是弹窗2中的一个数据表格。弹窗2的数据表格在弹窗3封闭的霎时然后插进去一条新的数据,此时弹窗2的谁人数据表格肯定要立马革新

//弹窗3(js代码写在弹窗2中)

function configuration(){
    parent.layer.open({//占坑!
        type: 2,
        title: "设置项目",
        content: "/xx/xx/xx/xx?budgetMainCode="+budgetMainCode,
        area: ["80%", "80%"],
        end: function () {//点睛之笔,此端代码就是精华的地方,layui监听到弹窗3的烧毁(窗口封闭)以后回调了一个end函数,经由过程这个end函数我们就可以革新弹窗2的数据
            refreshTable()//就比方这refreshTable()是弹窗2内里的用于拼接数据列表的函数
} }); }

如图弹窗2:

肯定以后挑选了这条模板数据,同时封闭弹窗3,结果如图:

更多layui框架学问请关注layui框架。

以上就是layui之弹出层封闭和革新题目的细致内容,更多请关注ki4网别的相干文章!

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注