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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
小程序实现五星点评效果
Nov 03 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 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)六
2006/10/09 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
PHP简单日历实现方法
2016/07/20 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
jquery 延迟执行实例介绍
2013/08/20 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
原生JS实现天气预报
2020/06/16 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python如何为图片添加水印
2016/11/25 Python
python查看微信好友是否删除自己
2016/12/19 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
python网络应用开发知识点浅析
2019/05/28 Python
NumPy统计函数的实现方法
2020/01/21 Python
python dumps和loads区别详解
2020/02/04 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
C#面试题问题集
2016/04/02 面试题
Java基础面试题
2014/07/19 面试题
城市规划应届毕业生自荐信
2014/07/04 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
使用Python开发冰球小游戏
2022/04/30 Python