Сделайте все ячейки редактируемыми в DataTables

Question

Я использую таблицы данных 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», но я не знаю, как сделать его содержимое редактируемым.

Answer 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()
    })
  }
})