如何在Bootstrap Table中实现部分列可编辑、部分列不可编辑？

问题根因 #

你当前直接给<table>、表头<tr>加全局contenteditable="true"的方式会让所有表格单元格默认继承可编辑属性，且Bootstrap Table是异步加载数据后动态生成<td>单元格的，静态写在表头的属性不会作用到动态渲染的内容上，自然无法实现列级别的编辑控制。

实现步骤 #

1. 先清理原有全局可编辑配置
   删掉<table>标签上的contenteditable='true'，同时删掉表头<tr>上的contenteditable='true'，避免全局属性覆盖列级配置。
2. 用列格式化函数实现按需开启可编辑
   给需要支持编辑的列新增data-formatter属性，指定自定义格式化函数，给对应列的单元格动态添加contenteditable属性；不需要编辑的列不做配置，默认不可编辑。
   修改后的表格HTML示例：

<table class="table table-bordered table-sm" width="100%" cellspacing="0" style="font-size: 1.0rem;"
       id="bk-table"
       data-toggle="table"
       data-toolbar="#toolbar"
       data-cookie="true"
       data-cookie-id-table="materialId"
       data-show-columns="true"
       data-show-refresh="true"
       data-show-fullscreen="true"
       data-height="650"
       data-click-to-select="true"
       data-id-field="id"
       data-show-footer="true"
       data-url="/api/materials/"
       data-query-params="queryParams"
       data-remember-order="true"
       data-pagination="true"
       data-side-pagination="client"
       data-total-field="count"
       data-data-field="results">
    <thead class="thead-dark" >
    <tr>
        <th data-field="state" data-checkbox="true"></th>                   
        <!-- 仅给需要编辑的列加data-formatter属性 -->
        <th data-field="type" data-formatter="editableFormatter">Course Type</th>
        <!-- 不需要编辑的列无需额外配置，默认不可编辑 -->
        <th data-field="id">课程ID</th>
    </tr>
    </thead>
</table>

3. 编写格式化函数与编辑保存逻辑
   新增JS代码实现可编辑单元格渲染、编辑后内容同步到后端DRF接口的逻辑：

// 可编辑列格式化函数：给目标单元格加contenteditable属性
function editableFormatter(value) {
  return `<span contenteditable="true" class="editable-cell">${value || ''}</span>`
}

// 监听单元格编辑失焦事件，提交修改到后端
$('#bk-table').on('blur', '.editable-cell', function() {
  const $cell = $(this)
  const $td = $cell.closest('td')
  const $tr = $td.closest('tr')
  // 获取当前行数据、编辑字段、新值
  const row = $('#bk-table').bootstrapTable('getRowByUniqueId', $tr.data('uniqueid'))
  const field = $td.data('field')
  const newValue = $cell.text().trim()

  // 调用Django REST Framework接口提交修改
  fetch(`/api/materials/${row.id}/`, {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': getCsrfToken('csrftoken') // 必须携带CSRF Token通过Django校验
    },
    body: JSON.stringify({[field]: newValue})
  }).then(res => {
    if(res.ok) {
      // 更新本地表格数据，避免刷新丢失
      $('#bk-table').bootstrapTable('updateCell', {
        index: $tr.data('index'),
        field: field,
        value: newValue
      })
    }
  })
})

// 辅助函数：获取Django CSRF Token
function getCsrfToken(name) {
  let value = null
  if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';')
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim()
      if (cookie.substring(0, name.length + 1) === name + '=') {
        value = decodeURIComponent(cookie.substring(name.length + 1))
        break
      }
    }
  }
  return value
}

可选优化 #

如果需要支持下拉选择、日期选择等复杂编辑类型，可以使用Bootstrap Table官方的editable扩展，只需要给对应列加data-editable="true"属性，通过onEditableSave事件监听编辑结果即可，无需自己实现格式化逻辑。 #

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