在layui表格中加入表单元素，将行数据值传递至后台解决方法

前端

2023-10-10 21:24:14

最近在使用 django + layui 构建网站时，遇到了如何在表格中加入开关和按钮功能以及向后台传递值的问题。经过一番研究和尝试，我找到了一个有效的解决方案。

第一步：准备工作

首先，确保您已安装layui并将其包含在您的项目中。
其次，在您的HTML文件中包含layui的CSS和JavaScript文件。

第二步：前端实现

创建一个表格并添加必要的列。
在适当的列中添加表单元素，如开关和按钮。
使用layui的事件监听器来捕捉表单元素的点击或改变事件。
在事件处理程序中，获取表单元素的值并将其存储在变量中。

第三步：后台处理

在您的后台代码中，创建一个处理表单数据提交的视图函数。
在视图函数中，获取表单数据并将其保存到数据库或其他存储介质中。

第四步：代码示例

<table id="example" lay-filter="demo">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>状态</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>
        <input type="checkbox" name="status" lay-skin="switch" lay-filter="status">
      </td>
      <td>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>
        <input type="checkbox" name="status" lay-skin="switch" lay-filter="status">
      </td>
      <td>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
      </td>
    </tr>
  </tbody>
</table>

<script>
layui.use('table', function(){
  var table = layui.table;

  //监听开关状态改变
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'status'){
      //获取开关状态
      var status = obj.value;

      //将开关状态发送至后台
      $.ajax({
        url: '/update_status/',
        type: 'POST',
        data: {id: data.id, status: status},
        success: function(res){
          //处理后台返回的数据
        }
      });
    }
  });

  //监听按钮点击事件
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'edit'){
      //编辑操作
    } else if(obj.event === 'delete'){
      //删除操作
    }
  });
});
</script>