layUI 在表格中触发单元格点击事件,弹出 layer.open在iframe层中的获取数据,并返回数据给表格的触发点击事件的行的指定列
时间: 2023-12-03 08:44:22 浏览: 242
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
5星 · 资源好评率100%
可以通过以下步骤实现:
1. 在表格中,为需要触发点击事件的单元格添加一个class,例如:`cell-clickable`。
2. 使用 `table.on('tool(test)', function(obj){})` 监听表格的点击事件。
3. 在监听函数中,判断点击的单元格是否有 `cell-clickable` 的 class,如果有则弹出 layer.open,在弹出的 iframe 中加载需要的数据,并提供一个保存按钮用于保存数据。
4. 在 iframe 中点击保存按钮时,将数据传递给父窗口,可以使用 `parent.layui.table.reload('test', {})` 方法重新加载表格数据,并更新需要更新的单元格。
下面是一个示例代码:
HTML:
```html
<table class="layui-table" lay-skin="line" id="test">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td class="cell-clickable">点击编辑</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td class="cell-clickable">点击编辑</td>
</tr>
</tbody>
</table>
```
JavaScript:
```javascript
layui.use(['layer', 'table'], function(){
var layer = layui.layer;
var table = layui.table;
//监听表格的点击事件
table.on('tool(test)', function(obj){
var data = obj.data; //获取当前行的数据
var $cell = $(obj.event.target); //获取当前单元格的 jQuery 对象
if ($cell.hasClass('cell-clickable')) { //判断单元格是否可编辑
layer.open({
type: 2,
title: '编辑数据',
shadeClose: true,
shade: 0.8,
area: ['600px', '400px'],
content: 'edit.html?id=' + data.id, //加载 edit.html 并传递参数
btn: ['保存', '取消'],
yes: function(index, layero){
//获取 iframe 中的数据
var iframeWin = window[layero.find('iframe')[0]['name']];
var newData = iframeWin.getData();
//更新表格数据
table.reload('test', {
where: {
id: data.id,
newData: newData
}
});
//关闭弹窗
layer.close(index);
},
btn2: function(index, layero){
//关闭弹窗
layer.close(index);
}
});
}
});
});
```
edit.html:
```html
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">年龄</label>
<div class="layui-input-block">
<input type="text" name="age" required lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
</form>
<script>
layui.use(['form'], function(){
var form = layui.form;
//获取数据
function getData() {
var data = {
name: $('input[name="name"]').val(),
age: $('input[name="age"]').val(),
sex: $('input[name="sex"]:checked').val()
};
return data;
}
//更新数据
function setData(data) {
$('input[name="name"]').val(data.name);
$('input[name="age"]').val(data.age);
$('input[name="sex"][value="' + data.sex + '"]').prop('checked', true);
form.render();
}
//设置数据
setData(parent.data);
});
</script>
```
阅读全文