如何使用Datatable Editor动态修改编辑URL适配Django REST接口要求

要实现更新操作动态拼接资源ID、指定PUT请求方法的需求，核心是利用Editor的ajax函数配置，在每次请求触发时动态生成请求参数。

完整实现代码 #

const editor = new DataTable.Editor({
  // 把ajax配置为函数，每次请求动态生成配置
  ajax: function (method, url, data, success, error) {
    // 处理更新/编辑操作
    if (data.action === 'edit') {
      // 单条编辑场景：取第一条编辑记录的ID
      const resourceId = Object.keys(data.data)[0]
      const resourceData = data.data[resourceId]
      
      $.ajax({
        // 拼接资源ID到接口路径末尾，符合Django REST路由规范
        url: `/api/你的资源接口路径/${resourceId}/`,
        // 指定请求方法为PUT
        type: 'PUT',
        // 直接提交资源字段数据，可根据后端要求调整结构
        data: resourceData,
        dataType: 'json',
        success: success,
        error: error
      })
    } else {
      // 新增、删除等其他操作可单独适配，这里为默认请求逻辑示例
      $.ajax({
        url: url,
        type: method,
        data: data,
        dataType: 'json',
        success: success,
        error: error
      })
    }
  },
  // 对应绑定的表格ID
  table: '#你的表格ID',
  fields: [
    // 你的业务字段配置，示例如下
    { label: '资源名称', name: 'name' },
    { label: '资源描述', name: 'description' }
  ]
})

关键配置说明 #

• 动态URL拼接：Editor触发编辑请求时，会把待编辑的记录数据放在data.data对象中，键为资源ID，我们直接取出该ID拼接在接口路径末尾即可，符合Django REST单资源操作的路径规范
• 请求方法指定：编辑操作强制设置type为PUT，适配Django REST默认的更新接口要求
• 批量编辑适配：如果需要支持批量更新操作，遍历data.data的所有键值对，分别调用PUT接口或者调用批量更新接口即可
• 主键适配：如果你的资源主键字段不是默认的id，把代码中取ID的逻辑替换为实际的主键字段名即可

验证注意事项 #

• 提前确认Django后端对应资源的路由已经配置了PUT方法，且权限、参数校验逻辑适配前端提交的字段
• 如果后端要求提交的参数需要CSRF Token，在ajax的headers配置中加入对应的CSRF头即可

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