使数据表中的所有单元格均可编辑 [英] Make all cells editable in DataTables
问题描述
我正在使用数据表 1.10.12,我正在绘制一个简单的表格:
I am using datatables 1.10.12 and I am having a simple table being drawn with:
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",但我不知道如何使其内容可编辑.
I would like to be able to edit the cells so that it will get updated in the database. For this I would need to have each with contenteditable set to true and to have a class for example update => for this, I add className: "update", but I don't know how to make it content editable.
推荐答案
您可以通过这种方式使 DataTable 中的所有单元格都可
You can make all cells in a DataTable editable this way :
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强>
As you can see in this demo -> http://jsfiddle.net/w9hrnf63
它们的关键部分是 row.invalidate()
.当且仅当您使用 DOM 表或其他静态资源时,这才会在内部更新行数据.如果您使用 serverSide
处理 invalidate()
只会将单元格内容重置回原始内容.所以执行你对服务器的更新请求而不是上面的 invalidate()
:
They key part is row.invalidate()
. This updates the row data internally if and only if you are working with a DOM table or other static resource. If you are using serverSide
processing invalidate()
will just reset the cell content back to original. So execute your update request to the server instead of invalidate()
above :
cell.addEventListener('blur', function(e) {
if (original !== e.target.textContent) {
const row = table.row(e.target.parentElement)
$.ajax({
url: '/updateScript/',
data: row.data()
})
}
})
这篇关于使数据表中的所有单元格均可编辑的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!