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 相关文章推荐
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 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语法(1)
2006/10/09 PHP
php扩展ZF――Validate扩展
2008/01/10 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Python使用django搭建web开发环境
2017/06/09 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python实现学员管理系统
2019/02/26 Python
python绘制随机网络图形示例
2019/11/21 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
2014国培学习感言
2014/03/05 职场文书
建议书范文
2015/02/05 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技