关于layer.open()弹出页面与”父页面“之间获取数据赋值给页面Element的问题

文章目录前言一、layer.open()的使用1.概念2.主要参数二、弹出页面与”父页面“之间获取Element数据并赋值1.需求2.实现代码1、前期准备**2、所有代码**三、最后前言最近在做一个超市管理系统的作业，我也是用到了layUI组件库，使用表格时，也是被编辑表格功能给搞的"心累"。官方给的编辑表格是直接点击（双击）表格某格就可以直接编辑表格。但我想实现的是，用户点击表格右侧”编辑”工具

矮矮李丑猪

7908人浏览 · 2021-11-12 15:49:41

矮矮李丑猪 · 2021-11-12 15:49:41 发布

前言

最近在做一个超市管理系统的作业，我也是用到了layUI组件库，使用表格时，也是被编辑表格功能给搞的"心累"。官方给的编辑表格是直接点击（双击）表格某格就可以直接编辑表格。但我想实现的是，用户点击表格右侧”编辑”工具栏就弹出一个“子页面”，在子页面上编辑对应的表格某行数据，并更新表格数据。当然这里我没有写数据库相关接口操作（不影响你的功能实现）。

提示：以下是本篇文章正文内容，下面案例可供参考

一、layer.open()的使用

1.概念

说白了，layer.open()就是在你的页面在弹出一个“子页面”。子页面的类型由它的参数type决定。

2.主要参数

（1）type - 基本层类型
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
（2）content - 内容
类型：String/DOM/Array，默认：’’
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。具体使用这里就不演示了。
（3）success - 层弹出后的成功回调方法
类型：Function，默认：null
当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM当前层索引。（这里就很重要）
（4）yes - 确定按钮回调方法
类型：Function，默认：null
该回调携带两个参数，分别为当前层索引、当前层DOM对象。
（5）btn - 按钮
类型：String/Array，默认：‘确认’
信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: ‘我知道了’，当你要定义两个按钮时，你可以btn: [‘yes’, ‘no’]。当然，你也可以定义更多按钮，比如：btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。

当然，layer.open（）它的参数还有很多，详情见：https://www.layuiweb.com/doc/modules/layer.html#base

二、弹出页面与”父页面“之间获取Element数据并赋值

1.需求

如下图顺序，我需要点击工具栏“编辑”，弹出一个“子页面”。
在页面上输入框（表单）中出现“订单数量的值”，并且可以改变其值。
点击确定按钮，子页面消失，表格数据跟新。

图4，表格订单数量发生变化

2.实现代码

1、前期准备

type类型用2（iframe层）
有关iframe，最开始我也是不知道是什么的。详见：https://host.zzidc.com/cjwt/678.html
（这里最开始，我想的是用1，但参考了文档与网友们的用法，还是用2了.因为我没找到type用1，然后获取弹出页的DOM的方法）
获取iframe页的DOM：layer.getChildFrame(selector, index) 。selector即iframe页的选择器。即：在当前页获取iframe页的DOM元素，本案列中就可以获取弹出页的body，然后在获取输入框（input）元素，在给其赋值。
content参数
这里写弹出页面（iframe页地址），我是在父页面同级目录下新建html文件two.html来充当（iframe页），所以：content: ‘./two.html’。
success子页面弹出回调函数
这里需要实现：弹出页面时就获取父页面表格的”订单数量的数据“，并赋值给其给子页面input元素。代码如下：
注data为该编辑表格对应行的所以数据集合，number为表格”订单数量“的值。（具体见下面所有代码）

success: function (layero, index) {
   // 获取子页面（iframe页）的body元素
    var body = layer.getChildFrame('body', index);
   // 找到body元素中id为edit_category的元素，并赋值（data.number) 
    body.find("#edit_category").val(data.number);                         
                                  },

yes参数回调函数
用户点击确定按钮，子页面消失，表格数据跟新。代码如下：

 yes: function (index, layero) {   //点击确定回调
       // 获取子页面（iframe页）的body元素
       var body = layer.getChildFrame('body', index);
      // 得到找到body元素中id为edit_category的元素，并获取其值赋值给g
       let g = body.find("#edit_category").val();
      //动态更新该编辑”行“的obj数据，这里时更新订单数量的值（number）
       obj.update({
          number: g
                  });
      //关闭该子页面
      layer.close(index);
      alert("编辑成功")。
  },

2、所有代码

注意：监听工具栏函数里面的data=obj.data

  layui.use('table', function () {
            var table = layui.table;
            // 部署表格
            table.render({
                elem: '#demo',
                id: 'text3',
                title: '订单管理'
                , height: 412
                , cellMinWidth: 80,
                limit: 8,
                limits: [8, 16, 24]
                , url: '你的网络请求数据接口，这里我把接口数据格式都写好了，所以下面没有在转化数据' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                  
                    { field: 'name', title: '订单商品', width: 80, },
                    { field: 'number', title: '订单数量', width: 80, sort: true, edit: 'text' },
                    
                ]]
            });

            // 监听点击操作栏
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if (layEvent === 'detail') { //查看
                    //do somehing
                } else if (layEvent === 'del') { //删除
                   //do somehing      
                } else if (layEvent === 'edit') {   //编辑表格
                    layer.open({
                        type: 2,
                        title: "修改数据",
                        area: ['390px', '330px'],
                        btn: ['确定', '取消'],
                        scrollbar: false,//屏蔽浏览器滚动条
                        content: './two.html',
                        success: function (layero, index) {
                            // 获取子页面（iframe页）的body元素
                            var body = layer.getChildFrame('body', index);
                            // 找到body元素中id为edit_category的元素，并赋值（data.number)
                            body.find("#edit_category").val(data.number);                         
                        },
                        yes: function (index, layero) {   //点击确定回调
                            // 获取子页面（iframe页）的body元素
                            var body = layer.getChildFrame('body', index);
                            // 得到找到body元素中id为edit_category的元素，并获取其值赋值给g
                            let g = body.find("[id='edit_category']").val();
                        //    动态更新该编辑”行“的obj数据，这里时更新订单数量的值（number）
                            obj.update({
                                number: g
                            });
                            layer.close(index);
                            alert("编辑成功")
                        },

                    })

                    //同步更新缓存对应的值

                }
            });




        });

2.two.html代码：

 <form >
        <div style="margin:15px 5px 10px 5px" class="div"> 
            订单数量
           <input type="text" id="edit_category" value="">
        </div>
 </form>

该处使用的url网络请求的数据，请返回的是table部署规定的json数据。

三、最后

这也是我第一次接触layer弹出层。只是把我在做作业的过程中遇到的问题进行编写，本人表述能力有限，相关专业术语可以用错，望你包容与指出。
本文也是参考了layUI官网关于弹出层的文档，链接都在文章中。
layer.js已经是下架了官网，相关参数可参考：https://www.layuiweb.com/doc/modules/layer.html#use。
https://www.layuiweb.com/doc/modules/layer.html#layer.getChildFrame。