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表单中实现排序功能，可以使用Layui的table模块和form模块结合起来实现。以下是一个简单的示例：

1. HTML代码

<table class="layui-table" id="table">
  <thead>
    <tr>
      <th>名称</th>
      <th>排序</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>第一行</td>
      <td>
        <input type="text" name="sort" lay-verify="required|number" value="1" class="layui-input">
      </td>
    </tr>
    <tr>
      <td>第二行</td>
      <td>
        <input type="text" name="sort" lay-verify="required|number" value="2" class="layui-input">
      </td>
    </tr>
    <tr>
      <td>第三行</td>
      <td>
        <input type="text" name="sort" lay-verify="required|number" value="3" class="layui-input">
      </td>
    </tr>
  </tbody>
</table>

2. JavaScript代码

layui.use(['table', 'form'], function() {
  var table = layui.table;
  var form = layui.form;

  //渲染表格
  table.render({
    elem: '#table',
    cols: [
      [
        { field: 'name', title: '名称' },
        { field: 'sort', title: '排序', edit: 'text' }
      ]
    ],
    data: [
      { name: '第一行', sort: 1 },
      { name: '第二行', sort: 2 },
      { name: '第三行', sort: 3 }
    ]
  });

  //监听单元格编辑事件
  table.on('edit(table)', function(obj) {
    var rowIndex = obj.tr.data('index'); //获取当前行索引
    var sort = obj.value; //获取修改后的排序值
    //更新数据源中对应行的排序值
    table.cache['table'][rowIndex].sort = sort;
  });

  //监听表单提交事件
  form.on('submit(save)', function(data) {
    //获取表单数据
    var formData = data.field;
    console.log(formData);
    //在这里可以将表单数据提交到后台进行处理
    return false; //阻止表单跳转
  });
});

在这个示例中，我们使用table.render()方法渲染表格，并设置了一个可以编辑的单元格来实现排序功能。在单元格编辑事件中，我们获取当前行的索引和修改后的排序值，然后更新数据源中对应行的排序值。最后，在表单提交事件中，我们可以获取表单数据并将其提交到后台进行处理。

希望这个示例对你有所帮助！