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'

相关问题

layui中表单提交后重新渲染table表格

在Layui中，可以通过以下步骤实现表单提交后重新渲染table表格：

1. 监听表单的提交事件，获取表单数据；
2. 发送 Ajax 请求，将表单数据提交给后端进行处理；
3. 在 Ajax 请求的回调函数中，根据后端返回的数据，重新渲染 table 表格。

以下是示例代码：

// 监听表单提交事件
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. 方案一：利用事件触发的`end`回调函数[^1]
当用户完成弹出层的操作（如点击确认按钮）并关闭它时，可以在`end`回调函数中处理刷新逻辑。例如：

   layui.use(['form', 'laypop'], function(){
       var form = layui.form();
       var laypop = layui.laypop;
       // 录入表单提交事件
       form.on('submit(*)', function(e){
           e.preventDefault(); // 阻止默认的表单提交行为
           // 提交数据到服务器...
           // 调用laypop的end方法，指定刷新逻辑
           laypop.end({
               refresh: function(){
                   // 更新弹出层内的内容或者数据
                   // 可能需要重新渲染相关的UI组件
               }
           });
       });
   });

2. 方案二：利用Ajax加载数据
如果只需要刷新表格的部分数据，可以通过Ajax请求从服务器获取新的数据，然后动态更新表格。比如：

   form.on('submit(*)', function(e){
       e.preventDefault();
       var formData = form.render(); // 获取表单数据
       $.ajax({
           type: 'POST',
           url: '/api/update_table_data', // 假设这是你的API接口
           data: formData,
           success: function(data){
               // 更新表格的数据
               $('#your-table-id').bootstrapTable('load', data);
           },
           complete: function(){
               // 弹出层关闭后可能的动作，比如清空表单
               form.resetFields();
           }
       });
   });