layui弹出框Tab选项卡的示例代码


Posted in Javascript onSeptember 04, 2019

最近做一个项目,使用LAYUI,在界面上Z弹出一个界面A,A上有TAB选项卡,分别为界面B、C;B界面上有一个列表,双击败列表行时,要把数据回写到界面Z; 界面A上有提交按钮,选中B界面上列表某一条数据,界面A上点提交时,同样回写数据到Z;

实现:双击:B上实现双击方法,调用A上界面方法,再调用Z界面上方法;

B界面上方法:

function dbclick_select(row,index){
debugger;
  if(row == null){
    var nodes=$("#TableSelectList").bootstrapTable('getSelections');
    row = nodes[0];
    if(row == undefined){
      row = null;
    }
  }
  if(row != null && row != ""){
    window.parent.onBackDwxx(row);
      
  }else{
    layer.alert("请选择一项数据");
  }

}

A界面上方法:

function onBackDwxx(row) {
  debugger;
  window.parent.onBackDwxx(row);
   var iframeName = window.name;
    var index = parent.layer.getFrameIndex(iframeName);
   window.parent.layer.close(index);

  }

Z界面上方法:

function onBackDwxx(row) {
   $("#query\\.dw_id").val(row.id);
   $("#dw_mc").val(row.zsdwmc);

  }

A界面上提交按钮实现:Z界面上提交方法调用A界面上方法,A界面上方法回调Z界面方法

Z界面方法调用A界面方法:$(layero).find("iframe")[0].contentWindow.onSelectTableDwxx();

A界面方法:

function onBackDwxx(row) {
  debugger;
  window.parent.onBackDwxx(row);
   var iframeName = window.name;
    var index = parent.layer.getFrameIndex(iframeName);
   window.parent.layer.close(index);
  }
  
  function onSelectTableDwxx(){
  var winx = $("#iframe1").find("iframe")[0].contentWindow;
  var nodes = winx.$("#TableSelectList").bootstrapTable('getSelections');
  onBackDwxx(nodes[0]);

}

Z界面上方法:

function onBackDwxx(row) {
   $("#query\\.dw_id").val(row.id);
   $("#dw_mc").val(row.zsdwmc);

  }

以上这篇layui弹出框Tab选项卡的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
用js 让图片在 div或dl里 居中,底部对齐
Jan 21 Javascript
JQuery 入门实例1
Jun 25 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
小程序实现搜索框功能
Mar 26 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 #Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 #Javascript
微信小程序按钮点击动画效果的实现
Sep 04 #Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 #Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 #Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 #Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 #Javascript
You might like
那些年一起学习的PHP(一)
2012/03/21 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
js jquery数组介绍
2012/07/15 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
python下载图片实现方法(超简单)
2017/07/21 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
详解python中sort排序使用
2019/03/23 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
C语言如何决定使用那种整数类型
2016/11/26 面试题
岗位明星事迹材料
2014/05/18 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
Java基础-封装和继承
2021/07/02 Java/Android
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android
vue递归实现树形组件
2022/07/15 Vue.js