在表单提交的回调函数中重新请求表格数据并重新渲染表格
时间: 2024-02-24 12:00:00 浏览: 129
好的,假设你使用的是 layui 的表格组件,那么在表单提交的回调函数中重新请求表格数据并重新渲染表格,可以参考下面的代码。
```javascript
layui.use(['table', 'form'], function() {
var table = layui.table;
var form = layui.form;
// 监听表单提交
form.on('submit(formSubmit)', function(data) {
// 表单提交后,重新请求表格数据
table.reload('tableId', {
url: 'yourDataUrl', // 请求地址
where: data.field, // 传递参数,这里使用表单数据
page: {
curr: 1 // 重新从第一页开始显示数据
},
done: function() {
// 重新渲染表单
form.render();
}
});
return false; // 阻止表单跳转
});
});
```
在上面的代码中,`table.reload()` 方法用于重新加载表格数据,其中的 `url` 属性表示重新请求数据的地址,`where` 属性表示传递的参数,这里使用表单数据。在 `done` 回调函数中,重新渲染表单,保证表单元素能够正确显示。
相关问题
layui中表单提交后重新渲染table表格
在Layui中,可以通过以下步骤实现表单提交后重新渲染table表格:
1. 监听表单的提交事件,获取表单数据;
2. 发送 Ajax 请求,将表单数据提交给后端进行处理;
3. 在 Ajax 请求的回调函数中,根据后端返回的数据,重新渲染 table 表格。
以下是示例代码:
```javascript
// 监听表单提交事件
form.on('submit(submitBtn)', function(data){
// 发送 Ajax 请求
$.ajax({
type: 'POST',
url: 'submit.php',
data: data.field,
success: function(res){
// 重新渲染 table 表格
table.reload('testTable');
layer.msg('提交成功');
},
error: function(){
layer.msg('提交失败');
}
});
return false;
});
```
其中,`submitBtn` 是表单提交按钮的 lay-filter 值,`submit.php` 是后端接口地址,`testTable` 是 table 表格的 id。在 Ajax 请求成功后,我们调用 `table.reload()` 方法重新渲染表格。
layui 表单提交之后渲染表格
layui表单提交之后渲染表格的方法如下:
1. 在表单提交的回调函数中重新渲染表格
2. 在表单提交的回调函数中重新请求表格数据并重新渲染表格
示例代码:
```
//表单提交回调函数
form.on('submit(formDemo)', function(data){
$.ajax({
type: "post",
url: "test.php",
data: data.field,
dataType: "json",
success: function (res) {
//更新表格数据
table.reload('test', {
data: res.data
});
}
});
return false;
});
```
需要注意的是 表格需要先做渲染,并且渲染的表格有对应的ID, 这里上面的示例里使用的是 'test'
阅读全文