小编给大家分享一下layUI怎样使用layer.open在content打开数据表格获取值并返回，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
在layUI编写的页面中，遇到这么一种情况，从一个页面中使用layer.open打开一个新窗口，新窗口中是一个数据表格，现在需要选中数据表格中的一列并获取它的值，以便下面这个选择按钮可以使用这个值进行后一步的操作。
如简单的选中之后显示选中数据的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是一款采用自身模块规范编写的前端UI框架，它遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，适合新手，并且它还提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发，能够作为PC网页端后台系统与前台界面的速成开发方案。
看完了这篇文章，相信你对“layUI怎样使用layer.open在content打开数据表格获取值并返回”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
