一、介绍

这个弹层并不是在一个页面的，他是由两个页面组合完成的，所以说是父子页面。

比如我现在要修改一个博客的分类，那么我不仅需要 博客的修改页面，还需要 分类的列表页面，望读者能够分清关系。

上面两个红框就是马上需要用到的两个页面。

二、实现

1、edit.html

将下面的两个方法添加到 edit.html 中的 js 代码块中

function selectCategory() {var options = {title: '选择类别',url:  ctx + "blog/category", // 注意，这个请求是去请求一个页面返回的，并不是JSON数据返回callBack: doSubmit}$.modal.openOptions(options);
}function doSubmit(index, layero){// 这里取到的是多行的var rows = layero.find("iframe")[0].contentWindow.getSelections();if (rows.length > 0){// #categoryId 就是修改页面的分类ID// 这个 rows[0].id 就是查询分类列表得到的分类主键ID// categoryId id 也就是数据库中对应的名称$('#categoryId').val(rows[0].id);  }$.modal.close(index);
}

2、查询的后端代码

注意，这里返回的是页面！注意，这里返回的是页面！注意，这里返回的是页面！

3、category.html

将下面的代码添加到JS代码块中

function getSelections() {return $("#" + table.options.id).bootstrapTable('getSelections');
}

这样就能选择数据回显到父弹框中了

若依框架-------弹层表格相关推荐

layer之弹层组件文档 layui.layer（v.1.9.0之后）
弹层组件文档 - layui.layer layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持.不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护.不断建设 ...
React15.6.0实现Modal弹层组件
代码地址如下: http://www.demodashi.com/demo/12315.html 注:本文Demo环境使用的是我平时开发用的配置:这里是地址. 本文适合对象了解React. 使用过w ...
一款近年来备受青睐的web弹层组件——layer（http://layer.layui.com/）
一款近年来备受青睐的web弹层组件--layer (http://layer.layui.com/) 一.使用场景由于layer可以独立使用,也可以通过Layui模块化使用.所以请按照实际需求来选择 ...
layui.layer弹层组件
layui.layer layui前端UI框架 layer弹层组件 layer使用方法 layer方法使用 layer.msg(content, options, end) - 提示框 layer.l ...
vue前端表格插件_Grid.js - 跨框架的前端表格插件
只想简简单单画个表格,但 React,Vue,Angular,-,这么多前端框架,各自都有不同的表格渲染库.就没有表格库能"一次画表,到处运行"吗?来看看 Grid.js 这个跨框 ...
原生、无依赖的web弹层组件——HLayer.js
经过两周的开发,今天HLayer.js终于完成了0.1.0版本,作为一个前端新人,更多的是将这个作为自己的练手作品,毕竟web弹层组件早已不是web开发的新鲜事物了,国内外也不乏众多优秀的弹层组件.不 ...
layer重复弹出(layui弹层同时存在多个)的解决方法
layer重复弹出(layui弹层同时存在多个)的解决方法参考文章: (1)layer重复弹出(layui弹层同时存在多个)的解决方法 (2)https://www.cnblogs.com/sird ...
jQuery Layer 弹层组件
layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...
vant组件搜索并选择_Vue.js自定义弹层组件|vue仿微信/ios弹窗
最近趁着国庆假期给自己充充电,一直在捣鼓Nuxt.js项目,由于项目中需要用到定制化弹窗功能,本来是想着使用Vant组件库,经过再三考虑,最后决定还是自己重新造一个,于是就有了Vue自定义弹出层VPo ...

若依框架-------弹层表格