以下是一个示例代码，其中假设你的表格 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>
```
扫一扫
1654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
