前言
最近在做一个超市管理系统的作业,我也是用到了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(