使数据表中的所有单元格均可编辑 [英] Make all cells editable in DataTables

查看:28
本文介绍了使数据表中的所有单元格均可编辑的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用数据表 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆