使用table.on('tool(test)', function (obj)和layer实现layui修改功能的数据回显,也就是将数据传到layer.open中的updateBook.html页面,请给出具体的完整代码
时间: 2023-06-26 18:06:06 浏览: 690
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
5星 · 资源好评率100%
以下是一个示例代码,其中假设你的表格 id 为 test,后端接口为 /api/book/:id,updateBook.html 是更新图书信息的页面。
HTML 代码:
```html
<table id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
```
JavaScript 代码:
```javascript
// 渲染表格
layui.use(['table', 'form', 'layer'], function () {
var table = layui.table;
var form = layui.form;
var layer = layui.layer;
// 渲染表格
table.render({
elem: '#test',
url: '/api/books',
cols: [[
{type: 'checkbox'},
{field: 'id', title: 'ID'},
{field: 'title', title: '标题'},
{field: 'author', title: '作者'},
{field: 'price', title: '价格'},
{fixed: 'right', title: '操作', toolbar: '#barDemo'}
]],
page: true
});
// 监听表格工具条
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'edit'){
// 打开更新图书信息的页面
layer.open({
type: 2,
title: '更新图书信息',
content: '/updateBook.html',
area: ['500px', '400px'],
btn: ['保存', '取消'],
yes: function(index, layero){
// 更新图书信息
var iframeWin = window[layero.find('iframe')[0]['name']];
var form = iframeWin.document.getElementById('updateForm');
var formData = new FormData(form);
$.ajax({
url: '/api/book/' + data.id,
type: 'PUT',
data: formData,
processData: false,
contentType: false,
success: function(res){
if(res.code === 0){
layer.msg('更新成功');
layer.close(index);
table.reload('test');
}else{
layer.msg('更新失败:' + res.msg);
}
},
error: function(){
layer.msg('网络错误');
}
});
},
btn2: function(index, layero){
// 取消更新
layer.close(index);
},
success: function(layero, index){
// 向 iframe 传递数据
var iframeWin = window[layero.find('iframe')[0]['name']];
iframeWin.document.getElementById('title').value = data.title;
iframeWin.document.getElementById('author').value = data.author;
iframeWin.document.getElementById('price').value = data.price;
}
});
}
});
});
```
updateBook.html 代码:
```html
<form id="updateForm">
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" id="title" name="title" 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" id="author" name="author" 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" id="price" name="price" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
</div>
</div>
</form>
<script>
layui.use(['form'], function(){
var form = layui.form;
// 表单验证
form.verify({
title: function(value){
if(value.length > 50){
return '标题不能超过50个字符';
}
},
author: function(value){
if(value.length > 20){
return '作者不能超过20个字符';
}
},
price: function(value){
if(isNaN(value)){
return '价格必须是数字';
}
}
});
});
</script>
```
阅读全文