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 相关文章推荐
Prototype Selector对象学习
Jul 23 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
vue项目中axios使用详解
Feb 07 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
fastadmin中调用js的方法
May 14 Javascript
pm2启动ssr失败的解决方法
Jun 29 Javascript
基于JS实现table导出Excel并保留样式
May 19 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开发过程中常用函数收藏
2009/12/14 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php数组去重实例及分析
2013/11/26 PHP
php调用c接口无错版介绍
2014/03/11 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
JS实现随机点名器
2020/04/12 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
Keras实现DenseNet结构操作
2020/07/06 Python
代理班主任的自我评价
2014/02/04 职场文书
会计专业自我鉴定
2014/02/10 职场文书
机关出纳岗位职责
2014/04/03 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
房屋租房协议书范本
2014/12/04 职场文书
员工福利申请报告
2015/05/15 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS