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

---

前言

最近在做一个超市管理系统的作业，我也是用到了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.需求

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

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(