热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

今天小编就为大家分享一篇layui弹出框Tab选项卡的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

最近做一个项目,使用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选项卡的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • 本文将详细介绍如何在Bootstrap 5中使用五种不同的表单控件样式,包括输入框、选择器和文本区域等元素。 ... [详细]
  • window下kafka的安装以及测试
    目录一、安装JDK(需要安装依赖javaJDK)二、安装Kafka三、测试参考在Windows系统上安装消息队列kafka一、安装JDKÿ ... [详细]
  • Consul 单节点与集群环境构建指南
    本文详细介绍了如何安装和配置 Consul 以支持服务注册与发现、健康检查等功能,包括单节点和集群环境的搭建步骤。 ... [详细]
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
  • 深入理解Java类加载机制
    本文详细探讨了Java虚拟机(JVM)中类加载器的工作原理,特别是如何通过类的全限定名从外部源获取二进制字节流,以及不同类型的类加载器及其在双亲委派模型中的角色。 ... [详细]
  • 深入解析JVM:类加载子系统详解
    本文旨在深入探讨Java虚拟机(JVM)中的类加载子系统,包括其基本结构、类加载器的工作原理、类的加载过程以及双亲委派机制。通过对这些关键点的详细分析,帮助读者更好地理解和掌握JVM的核心机制。 ... [详细]
  • 本文介绍了如何在Angular CLI创建的项目中安装并配置Bootstrap,包括必要的依赖项jQuery和Popper.js的安装步骤。 ... [详细]
  • PHP 中服务器变量的配置指南
    本文详细介绍了在 PHP 环境下如何正确设置服务器变量的方法,包括变量类型的动态转换及其应用场景。适合初学者及进阶开发者阅读。 ... [详细]
  • Bootstrap与Layui的主要差异分析
    在前端开发领域,Bootstrap与Layui是两种非常流行的框架选择。本文将深入探讨这两种框架的主要区别,帮助开发者根据项目需求做出最佳选择。 ... [详细]
  • 构建Filebeat-Kafka-Logstash-ElasticSearch-Kibana日志收集体系
    本文介绍了如何使用Filebeat、Kafka、Logstash、ElasticSearch和Kibana构建一个高效、可扩展的日志收集与分析系统。各组件分别承担不同的职责,确保日志数据能够被有效收集、处理、存储及可视化。 ... [详细]
  • Netty基础教程:构建简易Netty客户端与服务器
    Java NIO是解决传统阻塞I/O问题的关键技术之一,但其复杂性给开发者带来了挑战。Netty作为一个成熟的网络编程框架,极大地简化了这一过程。本文将通过一个简单的示例,介绍如何使用Netty创建基本的客户端和服务器。 ... [详细]
  • 本文探讨了Jeddict工具的应用价值,特别是在快速构建和部署CRUD服务系统方面的能力。通过介绍其核心功能和优势,以及当前的使用状况,文章还展望了Jeddict未来的改进方向。 ... [详细]
  • 探讨中国IT行业的现状与挑战,分析不同阶段程序员的职业路径选择,特别是对于拥有多年经验的大龄程序员来说,继续深耕技术领域或转向管理层的利弊。 ... [详细]
  • Eureka 注册中心实现密码认证
    自 Spring Cloud 1.1 版本起,Eureka 注册中心支持通过配置文件(如 bootstrap.yml)启用密码验证功能,以增强服务发现的安全性。 ... [详细]
  • 日期:2013年3月19日 来源:GBin1.com 对于希望启动并运行首个网站的新手而言,选择一个合适的CMS或免费平台是至关重要的第一步。本文将为您介绍一系列关于WordPress的设计开发资源和手册,帮助您迅速掌握网站构建技巧。 ... [详细]
author-avatar
合约100年
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有