jQuery DataTable內聯編輯

Question

我一直在嘗試在jQuery Datatable中實現簡單的內聯編輯。但是我無法激活單擊單元格上發生的編輯。我用同樣的代碼在自己的網站Link：

<table id="Datatable" cellpadding="0" cellspacing="0" border="0" class="display"> 
    <thead> 
     <tr> 
      <th>Age</th> 
      <th>Name</th> 
     </tr> 
    </thead> 
</table> 

數據表綁定：

/* Init DataTables */ 
    var oTable = $('#Datatable').dataTable({ 
     "bProcessing": true, 
     "sAjaxSource":"http://localhost:6220/DataSources/WCF/Data.svc/GetCustomer", 
     "aoColumns": [ 
          { "mDataProp": "Age" }, 
          { "mDataProp": "Name" } 
        ] 
    }); 

/* Apply the jEditable handlers to the table */    oTable.$('td').editable('http://localhost:6220/DataSources/WCF/Data.svc/SaveCustomer', { 
        tooltip: 'Click to edit...', 
        "callback": function (sValue, y) { 
         var aPos = oTable.fnGetPosition(this); 
         oTable.fnUpdate(sValue, aPos[0], aPos[1]); 
        }, 
        "submitdata": function (value, settings) { 
         return { 
          "row_id": this.parentNode.getAttribute('id'), 
          "column": oTable.fnGetPosition(this)[2] 
         }; 
        }, 
       "height": "14px", 
       "width": "100%" 
      }); 

任何建議高度讚賞。

Answer 1

請參考下面的例子： - https://editor.datatables.net/examples/inline-editing/simple PR - http://jquery-datatables-editable.googlecode.com/svn/trunk/index.html

Answer 2

我建了一個插件，它會在大約兩行代碼爲你做這個。它很小，很基本，但可以完成工作。回購協議是在這裏：DataTables CellEdit Plugin

基本的初始化是快速和容易：

oTable.MakeCellsEditable({ 
    "onUpdate": myCallbackFunction 
}); 

myCallbackFunction = function (updatedCell, updatedRow) { 
    console.log("The new value for the cell is: " + updatedCell.data()); 
} 

更新：這已經慢慢增長，在過去的幾個月中，有相當多的比當我第一次更多的功能發佈了這個答案。感謝所有貢獻者在那裏投入！