layui popup layer closing and refreshing problem

The layui framework is a front-end UI framework written using its own module specifications. It follows the writing and organizational form of native HTML/CSS/JS. In this article, we will take a look at the issues related to pop-up layer closing and refreshing in the layui framework.

Description:

On the main page, the first pop-up box pops up, and the second pop-up box pops up inside the first pop-up box, as shown in the figure:

1 is the main page, 2 is the pop-up window, and 3 is the pop-up window

Function 1: Okay, the first function I want to implement is to close pop-up window 3 after clicking OK on pop-up window 3.

On the js code, first post the code on how to pop up pop-up window 2 in main page 1:

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

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

}

Then posted how to pop up pop-up window 3 in pop-up window 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里面的用于拼接数据列表的函数
} }); }

//确定（代码写在弹窗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 + '"}')
        }
    })
}

Function 2:

The requirement is to click on the "Project Template" of a certain piece of data in pop-up window 3 and then select the template and insert this template into another table in the background

. The other table here refers to the pop-up A data table in window 2. The data table of pop-up window 2 will insert a new piece of data at the moment pop-up window 3 is closed. At this time, the data table of pop-up window 2 must be refreshed immediately

//弹窗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里面的用于拼接数据列表的函数
} }); }

As shown in pop-up window 2:

After confirmation, select this template data and close pop-up window 3. The effect is as shown below:

For more layui framework knowledge, please pay attention to layui framework.

The above is the detailed content of layui popup layer closing and refreshing problem. For more information, please follow other related articles on the PHP Chinese website!