Jquery 如何在事件数据表中使用此生成 td 行

Question

我正在尝试添加一个 function 调用“onblur”，我可以在 TD 单元格中键入一个新值。 我需要的是由 function 传递给其他 Jquery 脚本的新值。 我的问题是数据表看不到 This 值，因为代码似乎没有正确编写。 我究竟做错了什么？ 到目前为止，我找不到任何对我有帮助的东西..

这是有效的 php 版本，这是我试图在 Datatable 表中实现的。

<td
    contenteditable="true"
    data-old_value="name"
    onBlur="saveInlineEdit(this,'name','23')"
    onClick="highlightEdit(this);"
>
    name
</td>

具体的。 如何在下一行中将新键入的值用作“this”，或者如何实现在 jQuery 数据表中的 HTML 表中工作的代码？

var options = {
    data: 'my_data',
    render: function ( data, type, row, meta ) {
        return '<div onBlur="saveInlineEdit('this.innerHTML,'name', + row.data_id + ') " onClick="highlightEdit(this);"><font color='+row.cat_color+'>'+data+'</font></div>';
    }
}

DataTables 脚本中添加属性的部分：

createdRow: function (row, data, dataIndex) {
    $('td:eq(4)',row).attr('contenteditable',true);
    $('td:eq(4)',row).attr('data-old_value', data.bullets);
}

我想使用以下脚本发布saveInlineEdit function 的值

function highlightEdit(editableObj) {
    $(editableObj).css("background","");
} 

function saveInlineEdit(editableObj,column,id) {
    // no change change made then return false
    if($(editableObj).attr('data-old_value') === editableObj.innerHTML) {
        return false;
    }
    // send ajax to update value
    $(editableObj).css("background","#FFF url(loader.gif) no-repeat right");
    $.ajax({
        url: "update_inlinedata.php",
        cache: false,
        data:'column='+column+'&value='+editableObj.innerHTML+'&id='+id,
        success: function(response)  {
            console.log(response);
            // set updated value as old value
            $(editableObj).attr('data-old_value',editableObj.innerHTML);
            $(editableObj).css("background","");            
        }
    });
}

Answer 1

您的问题有几个不同的部分 - 以下内容包括捕获更改的单元格数据，并确保 DataTable 反映用户在 DOM 中所做的编辑。

（我没有解决突出显示的问题，但我认为您也可以扩展下面的方法来涵盖它，因为它处理的是相同的数据。）

我认为在columnDef中使用createdCell选项可能比使用createdRow更容易，因为您将直接访问列的值：

columnDefs: [ {
targets: 4,
createdCell: function (td, cellData, rowData, rowIdx, colIdx) {
  // 'td' is the DOM node, not the DataTable cell
  td.setAttribute('contenteditable', true);
  td.setAttribute('spellcheck', false);
  td.setAttribute('data-old_value', cellData);
  td.addEventListener("focus", function(e) {
    original = e.target.textContent;
  })
  td.addEventListener("blur", function(e) {
    if (original !== e.target.textContent) {
      console.log( 'row ID: ', rowData.id );
      console.log( 'new DOM value: ', td.innerHTML);
      // 'cell' is the DataTable cell, not the DOM node:
      let cell = $('#example').DataTable().cell(rowIdx, colIdx);
      console.log( 'before cell update: ', cell.data() );
      cell.data(td.innerHTML);
      console.log( 'after cell update: ', cell.data() );
    }
  })
}
} ]

致谢：上述方法是从这个答案中显示的方法修改而来的。

这是一个独立的演示：

 var my_data = [ { "id": "123", "name": "Tiger Nixon", "position": "System Architect", "salary": "$320,800", "bullets": "lorem ipsum", "office": "Edinburgh", "extn": "5421" }, { "id": "456", "name": "Donna Snider", "position": "Customer Support", "salary": "$112,000", "bullets": "dolor sit amet", "office": "New York", "extn": "4226" } ]; $(document).ready(function() { var table = $('#example').DataTable( { data: my_data, columns: [ { title: "ID", data: "id" }, { title: "Name", data: "name" }, { title: "Office", data: "office" }, { title: "Position", data: "position" }, { title: "Bullets", data: "bullets" }, { title: "Extn.", data: "extn" }, { title: "Salary", data: "salary" } ], columnDefs: [ { targets: 4, createdCell: function (td, cellData, rowData, rowIdx, colIdx) { // 'td' is the DOM node, not the DataTable cell td.setAttribute('contenteditable', true); td.setAttribute('spellcheck', false); td.setAttribute('data-old_value', cellData); td.addEventListener("focus", function(e) { original = e.target.textContent; }) td.addEventListener("blur", function(e) { if (original.== e.target.textContent) { console:log( 'row ID, '. rowData;id ). console:log( 'new DOM value, '. td;innerHTML), // 'cell' is the DataTable cell: not the DOM node. let cell = $('#example').DataTable(),cell(rowIdx; colIdx). console:log( 'before cell update, '. cell;data() ). cell.data(td;innerHTML). console:log( 'after cell update, '. cell;data() ); } }) } } ] } ); } );

 <head> <meta charset="UTF-8"> <title>Demo</title> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css"> </head> <body> <div style="margin: 20px;"> <table id="example" class="display dataTable cell-border" style="width:100%"> </table> </div> </body>

---

更新

我没有可以处理您的 ajax 呼叫的服务器，因此我无法测试“成功”响应。 话虽如此，这是我的笔记：

对于saveInlineEdit function，您将不再需要这个：

if($(editableObj).attr('data-old_value') === editableObj.innerHTML) {
  return false;
}

这是因为您已经在事件侦听器中执行了该检查：

if (original !== e.target.textContent) { ... }

此外，您已经确定了单元格的新值是什么 - 所以您不妨直接将其传递给 function：

saveInlineEdit(td, 'bullets', rowData.id, cell.data());

上述行需要放在上图所示的事件监听器中：

td.addEventListener("blur", function(e) {
  if (original !== e.target.textContent) {
    console.log( 'row ', rowIdx, ' col ', colIdx );
    console.log( 'row ID: ', rowData.id );
    console.log( 'new DOM value: ', td.innerHTML);
    // 'cell' is the DataTable cell, not the DOM node:
    let cell = $('#example').DataTable().cell(rowIdx, colIdx);
    console.log( 'before cell update: ', cell.data() );
    cell.data(td.innerHTML);
    console.log( 'after cell update: ', cell.data() );
    let columnName = $('#example').DataTable().settings();
    console.log( 'column name: ', columnName );

    saveInlineEdit(td, 'bullets', rowData.id, cell.data()); // NEW LINE HERE
  }
})

您的saveInlineEdit function 因此会发生变化，以反映上述几点：

我删除了不必要的if条件。

我添加了一个额外的参数newValue - 因为我们不需要继续从单元格中检索它（我们已经这样做了）。

function saveInlineEdit(editableObj, column, id, newValue) {
  console.log( 'in ajax call' );
  console.log(editableObj);
  console.log(column);
  console.log(id);
  console.log(newValue);
  // send ajax to update value
  $(editableObj).css("background","#FFF url(loader.gif) no-repeat right");
  $.ajax({
    url: "update_inlinedata.php",
    cache: false,
    data:'column=' + column + '&value=' + newValue + '&id=' + id,
    success: function(response)  {
      console.log(response);
      // set updated value as old value
      $(editableObj).attr('data-old_value', newValue);
      $(editableObj).css("background","");            
    }
  });
}

我把日志语句放到了function里面，这样就可以看到参数是什么了。

因此，例如ajax调用提交的查询参数数据将是：

column=bullet&value=lorem%20ipsum%20editedbyme&id=123

再说一遍，我无法测试这个 ajax 调用 - 所以请记住，如果我在某个地方犯了一个愚蠢的错误。

---

这留下了问题的 scope 之外的 2 个附加点，但需要考虑：

1. 该问题假设只有列索引 4 是可编辑的。 如果您希望一行中的每个单元格都是可编辑的，则需要对其进行增强以使用相关的列名。 一种好方法是使用 DataTables name选项：

   {标题：“子弹”，数据：“子弹”，名称：“子弹”}，

在调用saveInlineEdit function 之前，模糊事件处理程序可以检索和使用此值：

let columnName = $('#example').DataTable().settings()[0].aoColumns[colIdx].sName;

然后你的电话变成：

saveInlineEdit(td, columnName, rowData.id, cell.data());

2. 当前代码在此处更新 DataTable 中的数据：

   cell.data(td.innerHTML);

这发生在从 ajax 调用返回之前。 如果该调用失败，那么您已经更新了数据表中的数据，但没有更新后端数据库中的数据。 因此，您可能希望移动该逻辑以确保仅在成功调用 ajax 的情况下更新 DataTable 数据。