layui表格,在第一个页面通过data定义数据,渲染页面,但是弹出层代码写在第二个页面上,弹出层如何获取表格里面的值
时间: 2024-06-06 11:09:50 浏览: 163
您可以这样做:在点击弹出层按钮的时候,触发一个函数,在该函数中获取选中行的值,然后将这些值传递给弹出层。具体实现方法如下:
1. 在表格加载数据时,给每一行添加一个自定义属性,例如:data-id,值为该行的id。
2. 在点击弹出层按钮时,触发一个函数,获取当前选中行的id。
3. 在弹出层中,定义一个隐藏域,将选中行的id存储到该隐藏域中。
4. 在弹出层的表单提交事件中,获取隐藏域中的值,这样就可以获取到当前选中行的所有值了。
具体实现细节可以看一下以下代码示例:
//渲染表格
layui.table.render({
elem: '#table',
url: 'xxx',
cols: [
[
{type: 'checkbox'},
{field: 'id', title: 'ID', width: 80, sort: true},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80, sort: true},
{field: 'city', title: '城市', width: 150},
{field: 'sign', title: '签名', minWidth: 200},
{field: 'score', title: '评分', width: 80, sort: true},
{field: 'operate', title: '操作', toolbar: '#barDemo', fixed: 'right', width: 120}
]
],
page: true
});
//监听工具条
layui.table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.open({
type: 2,
title: '详情页面',
area: ['600px', '450px'],
content: 'detail.html',
btn: ['关闭', '提交'],
yes: function(index, layero){
layer.close(index);
},
btn2: function(index, layero){
//获取当前选中行的id,并将其存储到隐藏域中
var id = data.id;
$("#selectedId").val(id);
//提交表单
$("#form").submit();
//阻止默认行为
return false;
}
});
}
});
在弹出层的页面中,需要定义一个隐藏域:
<input type="hidden" name="selectedId" id="selectedId" value=""/>
在提交表单事件中,就可以获取到选中行的id了:
var id = $("#selectedId").val();
阅读全文