100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > layui弹出框子页面返回数据给父页面

layui弹出框子页面返回数据给父页面

时间:2023-03-08 06:04:54

相关推荐

layui弹出框子页面返回数据给父页面

最近从git上下载了一个开源的项目,项目前端使用layui框架。想使用该开源项目二次开发一个系统。开源项目名称是FEBS。

该项目封装了layui的一些方法,这里只介绍弹出框子页面怎么传值给父页面。

网上有介绍通过调用父页面函数的方式进行调用,参考/article/8280157529/

这里介绍另一种方式,通过在父页面定义一个数组,在子页面中,直接调用父页面数组,给数组赋值即可。代码如下

在父页面定义数组

var ShopInfoDlg = {data: {shopId: "",shopName: ""}};

在父页面调用open方法,打开子页面

$shopName.on('click',function () {febs.modal.view('子页面标题', 子页面URL,{//该放放是febs封装的layui的open方法btn: ['确定', '取消'],yes: function () {$('#febs-dlgshop').find('#saveBtn').trigger('click');//执行子页面的按钮点击事件var shopname = ShopInfoDlg.data.shopName;//接收子页面返回数据var fshopid = ShopInfoDlg.data.shopId;//接收子页面返回数据$("#fshopId").val(fshopid);//给页面元素赋值$("#fshopName").val(shopname);//给页面元素赋值febs.alert.info('名称:'+shopname+',编码:'+fshopid);},btn2: function () {febs.alert.info('取消按钮回调');return false;}});});

在父页面的确定按钮事件里,调用子页面的按钮事件,处理子页面逻辑。,febs封装的open方法,会在子页面的右下角添加两个按钮,子页面还需要添加一个隐藏的按钮,用于父页面调用执行。

<div class="layui-form-item febs-hide"><button class="layui-btn" id="saveBtn"></button><button type="reset" class="layui-btn" id="reset"></button></div>

子页面处理数据,将数据放到父页面的数组中。代码如下:

$saveBtn.on('click', function () {var checkStatus = table.checkStatus('dlgshopTable');if (!checkStatus.data.length) {febs.alert.warn('请选择需要删除的商品品牌');} else {var fIds = [];var fNames = [];layui.each(checkStatus.data, function (key, item) {fIds.push(item.fid);fNames.push(item.fshopName)});praent.ShopInfoDlg.data.shopId = fIds;//将子页面数据赋值给父页面数组praent.ShopInfoDlg.data.shopName = fNames;//将子页面数据赋值给父页面数组var indexPage = layer.index;//拿到最新的页面parent.layer.close(indexPage);//关闭页面}});

至此,子页面就可以将数据传给父页面,由父页面进行其他业务处理。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。