layUI 在表格中触发单元格点击事件,弹出 layer.open在iframe层中的获取数据,并返回数据给表格的触发点击事件的行的指定列
时间: 2023-12-14 14:40:25 浏览: 229
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
5星 · 资源好评率100%
可以通过以下步骤实现:
1. 在表格中绑定单元格点击事件,获取当前点击的行和列的数据:
```javascript
table.on('cell(tabDemo)', function(obj){
var data = obj.data; // 当前行的数据
var field = obj.field; // 当前列的字段名
// 弹出 layer.open,在 iframe 层中获取数据,并返回数据给表格的指定列
});
```
2. 在弹出的 layer.open 中,使用 iframe 层打开一个新页面,页面中加载需要获取数据的表单或表格:
```javascript
layer.open({
type: 2,
title: '获取数据',
area: ['800px', '600px'],
content: 'form.html', // 新页面的地址
btn: ['确定', '取消'],
yes: function(index, layero){
// 获取新页面中的数据
var iframeWin = window[layero.find('iframe')[0]['name']];
var newData = iframeWin.getData();
// 返回数据给表格的指定列
table.update({
id: data.id, // 更新指定行
field: field, // 更新指定列
value: newData // 更新数据
});
layer.close(index);
},
btn2: function(index, layero){
layer.close(index);
}
});
```
3. 在新页面中,编写获取数据的方法 getData(),并将获取的数据返回给父页面:
```javascript
function getData(){
var data = {};
// 获取表单或表格中的数据
// ...
return data;
}
```
通过以上步骤,就可以在 layUI 的表格中触发单元格点击事件,弹出 layer.open 在 iframe 层中获取数据,并返回数据给表格的触发点击事件的行的指定列。
阅读全文