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 相关文章推荐
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
vue debug 二种方法
Sep 16 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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服务器配置指南与使用经验的深入解析
2013/06/17 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
java判断三位数的实例讲解
2019/06/10 Python
如何通过python实现全排列
2020/02/11 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
explicit和implicit的含义
2012/11/15 面试题
花卉与景观设计系大学生求职信
2013/10/01 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
安全资金保障制度
2014/01/23 职场文书
客户答谢会致辞
2015/01/20 职场文书
服务员岗位职责范本
2015/04/09 职场文书
聘用合同范本
2015/09/21 职场文书
护士心得体会范文
2016/01/25 职场文书
四则混合运算教学反思
2016/02/23 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
Python读取和写入Excel数据
2022/04/20 Python