使所有单元格在 DataTables 中可编辑答案

【问题标题】：Make all cells editable in DataTables使所有单元格在 DataTables 中可编辑
【发布时间】：2019-08-18 14:08:48
【问题描述】：

我正在使用数据表 1.10.12，并且正在绘制一个简单的表格：

projectRevenue = $('#projectRevenue').DataTable({
    serverSide: true,
    processing: true,
    scrollX: true,
    stateSave: true,
    ajax: {
            url: "{!! route('listOfProjectsRevenueAjax',$project->id) !!}",
            type: "GET",
            dataType: "JSON"
        },
    columns: [
        { name: 'id', data: 'id' , searchable: false , visible: false },
        { name: 'year', data: 'year' , searchable: true , visible: true },
        { name: 'product_code', data: 'product_code' , searchable: true , visible: true  },
        { name: 'jan', data: 'jan' , searchable: true , visible: true },
        { name: 'feb', data: 'feb' , searchable: true , visible: true },
        { name: 'mar', data: 'mar' , searchable: true , visible: true },
        { name: 'apr', data: 'apr' , searchable: true , visible: true },
        { name: 'may', data: 'may' , searchable: true , visible: true },
        { name: 'jun', data: 'jun' , searchable: true , visible: true },
        { name: 'jul', data: 'jul' , searchable: true , visible: true },
        { name: 'aug', data: 'aug' , searchable: true , visible: true },
        { name: 'sep', data: 'sep' , searchable: true , visible: true },
        { name: 'oct', data: 'oct' , searchable: true , visible: true },
        { name: 'nov', data: 'nov' , searchable: true , visible: true },
        { name: 'dec', data: 'dec' , searchable: true , visible: true },

我希望能够编辑单元格，以便在数据库中更新。为此，我需要将每个 contenteditable 设置为 true 并设置一个类，例如 update => 为此，我添加了 className:"update"，但我不知道如何使其内容可编辑。

【问题讨论】：

您不需要向单元格添加额外的属性以使其可编辑。您只需要决定您的单元格数据输入字段的排列方式 - 您希望您的行单元格在单击它们时变成<input>/<select>（以编辑它们），或者您可以抛出引导模式与所有选定的行（S）数据输入字段和提交编辑按钮。之后，您可以使用更新的数据对后端进行 ajax 调用，并在 DataTable 上执行 .ajax.reload() 以刷新最新的表格内容。
如果您更清楚地了解您希望表格如何可编辑，也许我会建议一些可能会派上用场的确切代码 sn-ps。

标签： jquery datatables

【解决方案1】：

您可以通过这种方式使 DataTable 中的所有单元格都可编辑：

const createdCell = function(cell) {
  let original

  cell.setAttribute('contenteditable', true)
  cell.setAttribute('spellcheck', false)

  cell.addEventListener('focus', function(e) {
    original = e.target.textContent
  })

  cell.addEventListener('blur', function(e) {
    if (original !== e.target.textContent) {
      const row = table.row(e.target.parentElement)
      row.invalidate()
      console.log('Row changed: ', row.data())
    }
  })
}

table = $('#example').DataTable({
  columnDefs: [{ 
    targets: '_all',
    createdCell: createdCell
  }]
})

正如你在这个演示中看到的那样 -> http://jsfiddle.net/w9hrnf63

他们的关键部分是row.invalidate()。当且仅当您使用 DOM 表或其他静态资源时，这会在内部更新行数据。如果您使用serverSide 处理invalidate() 只会将单元格内容重置为原始内容。所以执行你的更新请求到服务器而不是上面的invalidate()：

cell.addEventListener('blur', function(e) {
  if (original !== e.target.textContent) {
    const row = table.row(e.target.parentElement)
    $.ajax({
      url: '/updateScript/',
      data: row.data()
    })
  }
})

【讨论】：