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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
javascript self对象使用详解
Oct 18 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 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中使用临时表查询数据的一个例子
2013/02/03 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
PHP session 会话处理函数
2016/06/06 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
python机器学习实战之树回归详解
2017/12/20 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
python opencv读mp4视频的实例
2018/12/07 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
上学迟到的检讨书
2014/01/11 职场文书
党员公开承诺书范文
2014/03/25 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
军训口号
2014/06/13 职场文书
校友回访母校寄语
2015/02/26 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
生活小常识广播稿
2015/08/19 职场文书