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脚本类
Aug 27 Javascript
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
JavaScript获取网页中第一个图片id的方法
Apr 03 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
js date 格式化
Feb 15 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
Vue表单控件数据绑定方法详解
Feb 05 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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
php自定义时间转换函数示例
2016/12/07 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
JS实现简易日历效果
2021/01/25 Javascript
python使用pil库实现图片合成实例代码
2018/01/20 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
python3中编码获取网页的实例方法
2020/11/16 Python
写一个方法1000的阶乘
2012/11/21 面试题
婚纱摄影师求职信范文
2014/04/17 职场文书
小学班级特色活动方案
2014/08/31 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
汽车转让协议书
2015/01/29 职场文书
首都博物馆观后感
2015/06/05 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记