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

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

author:咔咔

wechat:fangkangfk

案例:

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

image.png


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

content是子页面地址

image.png

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('我是咔咔')
            }
        });
    }


屏幕快照 2022-05-12 下午10.59.28.png屏幕快照 2022-05-12 下午10.59.40.png屏幕快照 2022-05-12 下午10.59.49.png

相关文章
|
JavaScript Java 数据格式
Layui数据表格(table)前后台交互
Layui数据表格(table)前后台交互
792 0
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
1061 0
|
JavaScript 前端开发
Layui 弹层组件 - 基础参数1
Layui 弹层组件 - 基础参数1
280 0
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
1033 0
|
3月前
|
SQL 前端开发 BI
如何开发设备管理系统中的设备点检板块 ?(附架构图+流程图+代码参考)
设备点检是设备管理系统中的核心模块,能够帮助企业制定点检标准、安排任务并记录结果,从而保障设备稳定运行,提升生产效率。本文详解设备点检模块的功能设计、业务流程、开发技巧与实现效果,并提供数据库设计、前端与后端实现建议,助力开发者快速构建高效、可靠的点检系统。
如何开发设备管理系统中的设备点检板块 ?(附架构图+流程图+代码参考)
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
2886 0
|
缓存 Linux 开发工具
CentOS 7- 配置阿里镜像源
阿里镜像官方地址http://mirrors.aliyun.com/ 1、点击官方提供的相应系统的帮助 :2、查看不同版本的系统操作: 下载源1、安装wget yum install -y wget2、下载CentOS 7的repo文件wget -O /etc/yum.
261171 0
|
IDE PHP 开发工具
除了Xdebug,还有哪些常用的PHP调试工具?
这些调试工具各有特点,开发者可以根据自己的需求和习惯选择适合的工具。在实际开发中,结合多种工具的使用往往能够更全面、更深入地进行调试,提高开发效率和代码质量。同时,随着技术的不断发展,新的调试工具也在不断涌现,开发者需要保持学习和关注,以便及时掌握最新的调试技术和工具。
376 1
|
JavaScript 前端开发 开发者
Layui layer 弹出层的使用【笔记】
本文介绍了Layui的layer弹出层组件的使用方法,包括如何通过在线CDN引入Layui的CSS和JS文件,以及如何使用layer.open(options)开启弹出层和layer.close(index)关闭弹出层。文章详细说明了弹出层类型的分类、options选项的参数配置,以及回调函数的使用。通过示例代码,展示了如何创建不同类型的弹出层,包括对话信息框、页面层、内联框架层、加载层和tips层。
|
Java Maven Spring
springboot学习一:idea社区版本创建springboot项目的三种方式(第三种为主)
这篇文章介绍了在IntelliJ IDEA社区版中创建Spring Boot项目的三种方法,特别强调了第三种方法的详细步骤。
10942 0
springboot学习一:idea社区版本创建springboot项目的三种方式(第三种为主)