最近从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);//关闭页面}});
至此,子页面就可以将数据传给父页面,由父页面进行其他业务处理。