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 相关文章推荐
JS随机生成不重复数据的实例方法
Jul 17 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
如何更好的编写js async函数
May 13 Javascript
浅析vue-router中params和query的区别
Dec 24 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
Session的工作方式
2006/10/09 PHP
php实现mysql数据库备份类
2008/03/20 PHP
PHP中设置时区方法小结
2012/06/03 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
js的三种继承方式详解
2017/01/21 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python实现冒泡排序的简单应用示例
2017/12/11 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python实现电子书翻页小程序
2019/07/23 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
如何理解python对象
2020/06/21 Python
Python pip 常用命令汇总
2020/10/19 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
模具专业推荐信
2013/10/30 职场文书
实习生的自我评价
2014/01/08 职场文书
施工材料员岗位职责
2014/02/12 职场文书
电子商务求职信
2014/06/15 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
机关党员公开承诺书
2014/08/30 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
导游词之扬州大明寺
2019/10/09 职场文书