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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
获取body标签的两种方法
Oct 13 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 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简单静态页生成过程
2008/03/27 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
php实例化一个类的具体方法
2019/09/19 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
django 常用orm操作详解
2017/09/13 Python
查看python下OpenCV版本的方法
2018/08/03 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
大学生村官典型材料
2014/01/12 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
岗位竞聘书范文
2014/03/31 职场文书
活动总结报告范文
2014/05/04 职场文书
红色故事汇观后感
2015/06/18 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis