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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
JavaScript 滚轮事件使用说明
Mar 07 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
用libTemplate实现静态网页的生成
2006/10/09 PHP
一个显示天气预报的程序
2006/10/09 PHP
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
PHP图片加水印实现方法
2016/05/06 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
一个JavaScript变量声明的知识点
2013/10/28 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
python简单操作excle的方法
2018/09/12 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python把1变成01的步骤总结
2019/02/27 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
使用Python实现分别输出每个数组
2019/12/06 Python
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
保密承诺书范文
2014/03/27 职场文书
全运会口号
2014/06/20 职场文书
安全演讲稿开场白
2014/08/25 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
2019年教师入党申请书
2019/06/27 职场文书