代码展示layui表格,在第一个页面通过data定义数据,渲染页面,但是弹出层代码写在第二个页面上,弹出层如何获取表格里面的值
时间: 2024-05-01 17:17:58 浏览: 7
您好,关于您的问题,可以通过以下几个步骤来实现:
首先,在第一个页面定义一个变量用来存储表格数据:
```javascript
var tableData = [{id: 1, name: '张三', age: 18}, {id: 2, name: '李四', age: 20}];
```
然后在第一个页面中使用layui表格渲染表格和绑定事件来触发弹出层:
```javascript
layui.use('table', function(){
var table = layui.table;
//渲染表格
table.render({
elem: '#demo',
data: tableData,
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'}
]]
});
//监听表格行点击事件
table.on('row(demo)', function(obj){
var rowData = obj.data; //获取当前行的数据
var id = rowData.id; //获取当前行的ID
//打开弹出层并传递ID
layer.open({
type: 2,
content: 'secondPage.html?id=' + id,
area: ['500px', '300px']
});
});
});
```
这里需要注意的是使用`table.on`方法监听表格行点击事件,在事件处理函数中获取当前行的数据并传递给弹出层。
最后,在第二个页面中获取传递过来的ID,并根据ID在表格数据中查找对应的数据:
```javascript
layui.use('form', function(){
var form = layui.form;
var id = getUrlParam("id"); //获取传递过来的ID
//根据ID查找对应的数据
var rowData = {};
for(var i=0; i<tableData.length; i++){
if(tableData[i].id == id){
rowData = tableData[i];
break;
}
}
//给表单赋值
form.val('data', rowData);
});
//获取URL参数
function getUrlParam(key) {
var reg = new RegExp('(^|&)' + key + '=([^&]*)(&|$)');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
```
在第二个页面中使用`form.val`方法给表单赋值,实现获取表格中的值。
希望能解决您的问题,如有不足之处请多多指教。