【Layui】子页面向父级页面传递参数

时间:2024-03-15 20:42:01

author:咔咔

wechat:fangkangfk

 

案例:

底层是父级页面,上边是子页面,子页面需要将选择的ID传递给父级页面

【Layui】子页面向父级页面传递参数

 

首先需要在父级页面写open打开子页面

content是子页面地址

【Layui】子页面向父级页面传递参数 

var type_id;
    layui.use(['laypage', 'layer','form'], function() {
        var laypage = layui.laypage
            , layer = layui.layer,
            form = layui.form;
        form.on('select(type_mid)', function(data){
            type_id = data.value;
        })
    });
    function show_layer(){
        layer.open({
            type: 2,
            area: [1000+'px', 1000+'px'],
            fix: false, //不固定
            maxmin: true,
            shadeClose: true,
            shade:0.4,
            title: '扩展分类',
            content: 'type?type_id='+type_id,  //url 为子布局的url路径
            success:function (layero,index) {

               console.log('我是咔咔')
            }
        });
    }

子页面的控制器,将需要的数据查询出来

【Layui】子页面向父级页面传递参数 

做到这一步我们的子页面就可以显示出来了

【Layui】子页面向父级页面传递参数 

这个时候我们不能使用layui自带的js,我们需要自己写

点击批量添加的时候触发这个事件,type_id是选择的所有分类

【Layui】子页面向父级页面传递参数 

 

我们需要注意这个方法,这个方法是父级页面的方法

【Layui】子页面向父级页面传递参数 

同样我们还需要在父级也写这个方法,就可以将子页面的数据传递过来了

【Layui】子页面向父级页面传递参数 

测试:

我们先选择

【Layui】子页面向父级页面传递参数 

点击添加:获取到id即可

【Layui】子页面向父级页面传递参数