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提示效果实例分析
Nov 25 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
webpack4 css打包压缩问题的解决
May 18 Javascript
js使用formData实现批量上传
Mar 27 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 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导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
利用Python获取操作系统信息实例
2016/09/02 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
九年级英语教学反思
2014/01/31 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
董存瑞观后感
2015/06/11 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL