HTML5+Django项目中可编辑数据表设置部分列不可编辑的实现方案问询

你当前使用的是Bootstrap Table组件，可按前后端配合的方案实现列粒度的编辑权限控制：

前端交互实现 #

• 第一步：移除表格全局可编辑属性
  删掉table标签上的contenteditable='true'属性，取消全局可编辑权限，改为单元格粒度单独控制。
• 第二步：给不可编辑列加自定义标记
  在<thead>中需要设置为不可编辑的<th>标签上添加data-editable="false"属性，示例如下：

  <!-- 比如课程代码、课程类型、ISBN三列设置为不可编辑 -->
  <th data-field="courseCode"  data-formatter="renderCourse" data-editable="false">Course Code</th>
  <th data-field="type" data-editable="false">Course Type</th>
  ...
  <th class ='isbn' data-field="book.isbn" data-editable="false">iSBN or e-iSBN/VBID</th>
  

• 第三步：添加JS逻辑动态控制单元格编辑权限
  监听Bootstrap Table的渲染完成事件，批量给单元格设置contenteditable属性，同时可添加样式区分可编辑/不可编辑状态：

  $('#bk-table').on('post-body.bs.table', function () {
    // 先读取所有列的编辑权限配置
    const columnEditable = []
    $('#bk-table thead th').each(function(index) {
        columnEditable.push($(this).data('editable') !== false)
    })
    // 遍历所有行的单元格设置属性
    $('#bk-table tbody tr').each(function() {
        $(this).find('td').each(function(index) {
            if (columnEditable[index]) {
                $(this).attr('contenteditable', 'true')
                // 可选：给可编辑单元格加高亮提示
                $(this).css('background-color', '#fffbe6')
            } else {
                $(this).attr('contenteditable', 'false')
                // 可选：给不可编辑单元格加禁用样式
                $(this).css('cursor', 'not-allowed')
            }
        })
    })
  })
  

后端安全校验 #

前端限制仅用于优化交互，无法阻止恶意接口调用篡改数据，必须在后端补充校验逻辑。

• 方案1：你当前序列化器中大部分关联字段已经声明为ReadOnlyField，符合只读字段的保护要求，如果还有新增需要保护的字段，直接声明为ReadOnlyField即可。
• 方案2：重写序列化器的update方法，过滤不允许修改的字段，避免前端绕过限制提交数据：

  def update(self, instance, validated_data):
      # 仅允许修改备注、状态、报废原因三个字段，其他字段自动过滤
      allow_update_fields = ['remark', 'status', 'discard_reason']
      filtered_data = {k:v for k,v in validated_data.items() if k in allow_update_fields}
      return super().update(instance, filtered_data)
  

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