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模拟点击事件实现代码
Nov 06 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
js表单登陆验证示例
Oct 19 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
VUE重点问题总结
Mar 19 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 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 面向对象的一个例子
2011/04/12 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php验证码实现代码(3种)
2015/09/07 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python下10个简单实例代码
2017/11/15 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
项目开发计划书
2014/01/09 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
精神文明单位申报材料
2014/05/02 职场文书
公司证明怎么写
2014/09/22 职场文书
2015年教师节活动总结
2015/03/20 职场文书
区域销售大会开幕词
2016/03/04 职场文书
Django框架中表单的用法
2022/06/10 Python
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript