layUI使用layer.open,在content打开数据表格,获取值并返回的方法


Posted in Javascript onSeptember 26, 2019

在layUI编写的页面中,遇到这么一种情况,从一个页面中使用layer.open打开一个新窗口,新窗口中是一个数据表格,现在需要选中数据表格中的一列并获取它的值,以便下面这个选择按钮可以使用这个值进行后一步的操作。

layUI使用layer.open,在content打开数据表格,获取值并返回的方法

如简单的选中之后显示选中数据的id。

首先在当前原始页面上,定义一个工具条

<button class="layui-btn" data-type="simulatePack">模拟</button>

在实现这个工具条的点击操作--打开一个新的窗口

simulatePack: function(){ //模拟操作
    var checkStatus = table.checkStatus('box')
     ,data = checkStatus.data;
    layer.open({
     type:2
     ,area: ['800px', '600px']
     ,title:'请选择'
     ,content: 'container.html'
     ,maxmin: true
     ,btn: ['确认选择', '关闭'] 
     ,yes: function(index, layero){
      var row = window["layui-layer-iframe" + index].callbackdata();
      layer.alert("get:"+row);
      // var row = $(layero).find("layui-layer-iframe")[0].contentWindow.callbackdata();
      //可以使用ajax请求对数据进行进一步处理
      layer.close(index);
     },btn2: function(index, layero){
      layer.close(index);
     }
    })
   },

这里的row是从新打开的窗口中返回的值。

在新窗口中,我定义了一个conId作为返回值,具体如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>layui</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" rel="external nofollow" media="all">
</head>
<body>
<table class="layui-hide" id="container" lay-filter="container"></table>
<script src="/layuiadmin/layui/layui.js" charset="utf-8"></script>
<script>
 var conId;
 layui.use('table', function(){
  var table = layui.table;
 
  table.render({
   elem: '#container'
   ,url:'/container/listAll'
   ,page:true
   ,cols: [[
    {type:'radio'}
    ,{field:'id', title: 'ID'}
    ,{field:'length', title: '长度'}
    ,{field:'width', title: '宽度'}
    ,{field:'height', title: '高度'}
    ,{field:'weightLimit', title: '承重限制'}
    ,{field:'volumn', title: '体积'}
    ,{field:'height', title: '高度'}
   ]]
  });
 
  //监听行单击事件(单击事件为:rowDouble)
  table.on('row(container)',function(obj){
   var data = obj.data;
   conId = data.id;
   //标注选中样式
   obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
  });
 });
 var callbackdata = function () {
  return conId;
 }
</script>
 
</body>
</html>

这样就实现了从content中的页面中返回值的功能。

以上这篇layUI使用layer.open,在content打开数据表格,获取值并返回的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
js中小数转换整数的方法
Jan 26 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 #Javascript
Vue 刷新当前路由的实现代码
Sep 26 #Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 #Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 #Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 #Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 #Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 #Javascript
You might like
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
python黑魔法之参数传递
2016/02/12 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
Python多线程多进程实例对比解析
2020/03/12 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
和平主题的演讲稿
2014/01/12 职场文书
小学班级口号
2014/06/09 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
2015年助残日活动总结
2015/03/27 职场文书