#jquery #datatables
#jquery #таблицы данных
Вопрос:
Я использую таблицы данных 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», но я не знаю, как сделать его содержимое доступным для редактирования.
Комментарии:
1. Вам не нужно добавлять дополнительные атрибуты к ячейкам, чтобы сделать их доступными для редактирования. Вам просто нужно решить, каким образом будут расположены поля ввода данных вашей ячейки — либо вы хотите, чтобы ваши ячейки строк превращались в
<input>
/<select>
при нажатии на них (чтобы редактировать их на месте), либо вы можете запустить bootstrap modal со всеми полями ввода данных выбранной строки (ов) и кнопкой отправки изменений. После этого вы можете просто выполнить ajax-вызов вашего серверного сервера с обновленными данными и выполнить.ajax.reload()
в DataTable, чтобы обновить актуальное содержимое таблицы.2. Если вы прольете больше света на то, как именно вы хотите, чтобы ваша таблица стала доступной для редактирования, возможно, я смогу предложить несколько точных фрагментов кода, которые могут пригодиться.
Ответ №1:
Вы можете сделать все ячейки в таблице данных доступными для редактирования таким образом :
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()
})
}
})