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.boxy插件的iframe扩展代码
Jul 02 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
单元选择合并变色示例代码
May 26 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 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调用三种数据库的方法(3)
2006/10/09 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Python实现简单字典树的方法
2016/04/29 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python生成excel的实例代码
2017/11/08 Python
python交互式图形编程实例(一)
2017/11/17 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
详解Python locals()的陷阱
2019/03/26 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
职工运动会邀请函
2014/02/02 职场文书
党支部半年考察意见
2015/06/01 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
JavaScript获取URL参数的方法分享
2022/04/07 Javascript
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle