在Django中使用bootstable.js实现表格数据增删改的后端传输问题

我用bootstable.js处理表格，想实现数据的新增、更新和删除，但始终无法获取有效数据传给后端，求解决方案。

我的HTML代码 #

<table class="table table-bordered" id="table-list">
<thead>
  <tr>
    <th></th>
    <th>Name</th>
    <th>Slug</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  {% for chart in charts %}
  <tr>
    <th id="id">{{chart.id}}</th>
    <td class="editable" id="name">{{chart.name}}</td>
    <td class="editable" id="slug">{{chart.slug}}</td>
    <td>john@example.com</td>
  </tr>
  {% empty %}
  <p>No data</p>
  {% endfor %}
</tbody>
</table>

我的JavaScript代码 #

<script src="{% static 'npe_cp/js/bootstable.js' %}"></script>
<script>
//apply
$("#table-list").SetEditable();
$('#addRow').click(function() {
  rowAddNew('table-list');
});

$('#bAcep').on('click', function(){
  // var id=$("#id").val();
  // var name=$("#name-44").val();
  // var slug=$("#slug-44").val();
  let name=document.querySelector('#name')
  console.log(id, name, slug, 'Hello World')
  $.ajax({
      url:"/chart/edit",
      type:"POST",
      data:{
        "id":id,
        "name":name,
        "slug":slug,
      },
    })
});
</script>

解决方案 #

1. 修复HTML的重复ID问题 #

循环渲染表格行时，不能给多个元素设置相同的id（比如id="id"、id="name"），ID必须唯一。改用class来标记数据列：

<tbody>
  {% for chart in charts %}
  <tr>
    <th class="id">{{chart.id}}</th>
    <td class="editable name">{{chart.name}}</td>
    <td class="editable slug">{{chart.slug}}</td>
    <td>john@example.com</td>
  </tr>
  {% empty %}
  <tr><td colspan="4">No data</td></tr>
  {% endfor %}
</tbody>

2. 正确获取表格数据 #

bootstable.js在编辑模式下会把.editable的单元格转换成input元素，所以要根据元素类型获取值；同时要针对当前操作的行来收集数据，而不是全局查找：

$('#bAcep').on('click', function(){
  // 获取当前操作的表格行
  const $row = $(this).closest('tr');
  
  // 提取行内数据：id是静态文本，name和slug可能是input或文本
  const id = $row.find('.id').text().trim();
  const $name = $row.find('.name');
  const name = $name.is('input') ? $name.val().trim() : $name.text().trim();
  const $slug = $row.find('.slug');
  const slug = $slug.is('input') ? $slug.val().trim() : $slug.text().trim();

  console.log(id, name, slug);

  // 发送AJAX请求到后端
  $.ajax({
    url: "/chart/edit",
    type: "POST",
    // 带上Django要求的CSRF令牌
    data: {
      "csrfmiddlewaretoken": $('[name=csrfmiddlewaretoken]').val(),
      "id": id,
      "name": name,
      "slug": slug,
    },
    success: function(res) {
      alert('操作成功');
      // 新增行的话，把后端返回的新ID更新到表格
      if (id === '') {
        $row.find('.id').text(res.new_id);
      }
    },
    error: function(xhr) {
      alert('操作失败：' + xhr.responseText);
    }
  });
});

3. 实现删除操作 #

绑定bootstable.js的删除按钮事件，发送删除请求：

// 动态绑定删除按钮（因为新增行是动态生成的）
$(document).on('click', '.del', function(){
  const $row = $(this).closest('tr');
  const id = $row.find('.id').text().trim();
  
  if (!confirm('确定要删除这条记录吗？')) return;

  $.ajax({
    url: "/chart/delete",
    type: "POST",
    data: {
      "csrfmiddlewaretoken": $('[name=csrfmiddlewaretoken]').val(),
      "id": id,
    },
    success: function() {
      $row.remove();
      alert('删除成功');
    },
    error: function(xhr) {
      alert('删除失败：' + xhr.responseText);
    }
  });
});

4. 后端逻辑提示 #

后端需要根据id是否为空判断是新增还是更新：

• 如果id为空：执行新增逻辑，返回新生成的ID
• 如果id存在：执行更新逻辑
• 删除接口根据id删除对应数据

内容的提问来源于stack exchange，提问作者user18408844