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 相关文章推荐
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
浅谈Vue的响应式原理
May 30 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 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 var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
实用javaScript技术-屏蔽类
2006/08/15 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
python频繁写入文件时提速的方法
2019/06/26 Python
pybind11在Windows下的使用教程
2019/07/04 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
理货员的岗位职责
2013/11/23 职场文书
先进个人获奖感言
2014/01/24 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
党支部特色活动方案
2014/08/20 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
三好学生事迹材料
2014/12/24 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python