layUI 在表格中触发单元格点击事件,弹出 layer.open在iframe层中的获取数据,并返回数据给表格的触发点击事件的行的指定列
时间: 2023-07-15 09:13:32 浏览: 223
可以通过以下步骤实现:
1. 在表格中定义单元格的 lay-event 属性,用于触发单元格点击事件。例如:
```
<table class="layui-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td lay-event="edit">编辑</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td lay-event="edit">编辑</td>
</tr>
</tbody>
</table>
```
2. 在页面中引入 layUI 的 layer 模块,并定义 iframe 弹出层的内容。例如:
```
<script src="//cdn.layui.com/layui/2.5.7/layui.all.js"></script>
<script>
layui.use(['layer'], function() {
var layer = layui.layer;
// 定义 iframe 弹出层的内容
var editUrl = 'edit.html'; // 编辑页面的 URL
var editContent = '<iframe src="' + editUrl + '" frameborder="0" width="100%" height="100%" style="padding:10px;"></iframe>';
// 监听单元格点击事件
$('table.layui-table').on('click', 'td[lay-event="edit"]', function() {
var tr = $(this).closest('tr'); // 获取点击行的 tr 元素
var index = tr.data('index'); // 获取点击行的索引
var id = tr.data('id'); // 获取点击行的 ID
// 弹出 iframe 层
layer.open({
type: 2,
title: '编辑',
content: editContent,
area: ['800px', '600px'],
btn: ['保存', '取消'],
yes: function(index, layero) {
// 获取 iframe 中的数据
var iframeWin = window[layero.find('iframe')[0]['name']];
var data = iframeWin.getData();
// 将数据返回给表格的指定列
$('table.layui-table').find('tr[data-index="' + index + '"] td[data-field="name"]').text(data.name);
$('table.layui-table').find('tr[data-index="' + index + '"] td[data-field="age"]').text(data.age);
layer.close(index); // 关闭弹出层
}
});
});
});
</script>
```
3. 在弹出层的 iframe 页面中定义 getData 函数,用于获取需要返回的数据。例如:
```
<script>
function getData() {
var name = $('input[name="name"]').val();
var age = $('input[name="age"]').val();
return {
name: name,
age: age
};
}
</script>
```
这样,当用户点击表格中指定单元格时,会弹出编辑页面的 iframe 层,用户在该页面中编辑数据并保存后,数据会返回给表格的指定列。
阅读全文