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 數據。