jQuery 数据表内联编辑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16280124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery DataTable Inline Editing
提问by lbrahim
I have been trying to implement simple Inline editing in jQuery Datatable. But I cannot activate the edit that happens on click on a row cell. I used the same code as in their site Link:
我一直在尝试在 jQuery Datatable 中实现简单的内联编辑。但是我无法激活单击行单元格时发生的编辑。我使用了与他们网站链接中相同的代码：
<table id="Datatable" cellpadding="0" cellspacing="0" border="0" class="display">
<thead>
<tr>
<th>Age</th>
<th>Name</th>
</tr>
</thead>
</table>
Datatable Binding:
数据表绑定：
/* 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%"
});
Any suggestions are highly appreciated.
任何建议都非常感谢。
回答by Elliott
I built a plugin that'll do this for you in about two lines of code. It's small and pretty basic but gets the job done. The repo is here: DataTables CellEdit Plugin
我构建了一个插件，可以在大约两行代码中为您完成此操作。它很小而且非常基本，但可以完成工作。存储库在这里：DataTables CellEdit Plugin
The basic initialization is quick and easy:
基本的初始化快速而简单：
oTable.MakeCellsEditable({
"onUpdate": myCallbackFunction
});
myCallbackFunction = function (updatedCell, updatedRow) {
console.log("The new value for the cell is: " + updatedCell.data());
}
Update:This has slowly been growing over the past few months and has quite a few more features than when I first posted this answer. Thanks to all the contributors out there pitching in!
更新：这在过去几个月里一直在缓慢增长，并且比我第一次发布这个答案时有更多的功能。感谢所有的贡献者在那里投球！
