layui table 子页面修改父页面数据

layui-table在使用过程中,如对某条数据进行审核,在子页面完成审核后通常需要关闭子页面并且刷新父页面来展示当前数据最新状态。
原解决模式:
parent.layer.closeAll();
parent.location.reload();
如当前为第N页或已选择搜索条件,则此时页面刷新后将导致条件丢失。

解决方式1:

点击数据时传递当前数据index值到后台,子页面调用父页面方法完成数据变更。
父页面点击审核操作打开子页面并传递index数据:

table.on('tool(table-toolbar)', function(obj){
    var data = obj.data;
    var index = $(obj.tr).attr('data-index');
    if(obj.event === 'edit'){
        layer.open({
            type: 2
            ,title: '审批'
            ,content: "{:url('xxx.xxx/check', [], false)}/uuid/"+data.uuid+"/index/"+index
            ,area: ['800px', '700px']
        });
    }
});

父页面定义方法:

window.changeStatus = (res, index) => {
    console.log(res, index);
    $("div[lay-id='table-toolbar']").find("tr[data-index="+index+"]").find('td[data-field="flow_status_str"] div').html(res);
}

子页面返回:

let str = "<span class='ss-success'>审核通过</span>";
if(result==-1){
    str = "<span class='ss-red'>已拒绝</span>";
}
parent.changeStatus(str, index);

解决方式2:
父页面定义刷新表格方法:

layui.config({
    base: '{__LAYUI_PATH}' //静态资源所在路径
}).extend({
    index: 'lib/index' //主入口模块
}).use(['index', 'form', 'table'], function(){
    var $ = layui.$
        ,form = layui.form
        ,table = layui.table;

    //无刷新更新表格
    window.ssReloadTable = () => {
        table.reload('table-toolbar');
    }
});

子页面调用:parent.ssReloadTable();

Tags: 前端

添加新评论