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 mobile做幻灯播放效果实现步骤
Jan 04 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
vue实现通讯录功能
Jul 14 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 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获取数组中重复数据的两种方法
2013/06/28 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
php 数据结构之链表队列
2017/10/17 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
浅谈Vue 初始化性能优化
2017/08/31 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
Python实现单词翻译功能
2017/06/06 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
python实现大学人员管理系统
2019/10/25 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
python和c语言哪个更适合初学者
2020/06/22 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
建筑工程专业学生的自我评价
2013/12/25 职场文书
销售顾问工作计划书
2014/08/15 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
大学毕业生个人总结
2015/02/28 职场文书
技术员岗位职责范本
2015/04/11 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL