前言

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

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

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的元素，并获取其值赋值给glet 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的元素，并获取其值赋值给glet 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。

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

jQuery中ajax获取数据赋值给页面
//html代码 <a href="javascript:void(0)" class="cityname" id="{$rr[code]}&q ...
多页面之间传递数据的方法
传统的前端开发中,页面之间是少有参数交互的,甚至没有,而在如今的前端环境下, 一个稍微正式点的项目都不可能少了页面间传参,页面的跨越.服务器后台进行数据请求等,都需要一个或多个传参的方法. 那么参数在 ...
android数据回传多个页面_Android页面之间进行数据回传
要求:页面1跳转到页面2,页面2再返回页面1同时返回数据页面1添加如下代码: Intent intent = new Intent(); intent.setClass(页面1.this, 页面2. ...
HTML学习笔记：演示HTML页面之间传递数据
1.起始页面page01.html 2.目标页面page02.html 3.查看运行效果单击[提交]按钮,跳转到目标页面page02.html 4.出现乱码问题 5.解决乱码问题如何解决这个问题呢 ...
vue 父组件获取接口值传到子组件_vue 项目中 “父组件” 异步获取数据之后，传递给子组件不显示...
有两个组件:一个为 transaction(父组件),一个为 transactionList (子组件): 上图为一个列表页,为父组件,在父组件里面的data中定义了数据列表, template中: ...
ASP.NET前台html页面AJAX提交数据后台ashx页面接收数据
摘要:最近在写网站,好不容易弄好了需求又变了,没错企业的门户网站硬要弄成后台管理系统一样,没办法作为小工的我只能默默的改.前台HTML页面需要提交数据到后台处理,又不能用form表单,于是乎研究了1天 ...
【四二学堂】jquery方式ajax获取数据并渲染页面
var newsData = ''; var mydata = {"pageNum":obj.curr,"pageSize":"5"}; / ...
Ajax获取数据渲染到页面的过程
Ajax 分四步骤: 创建一个Ajax对象: 打开一个链接: 监听请求的数据: 发送请求. 直接贴代码啦 <script>$(function () {$.ajax({url:'http: ...
Ajax获取数据渲染到页面
<script> $(function () {$.ajax({url:'http://www.hzy.cmdcw.com/index.php/message', type:'post', ...

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

文章目录

前言