Jquery dataTable 可编辑单元格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17463391/
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 Editable Cell
提问by Miguel
I give up as I have been messing around with this for the past 4 hours and I am just not getting anywhere. When using the jquery datatable found here. http://datatables.net/examples/api/editable.html(seems like a very popular plug in) I can get pretty much everything I want to work except the editable cell part. I have my file in this order
我放弃了，因为我在过去的 4 个小时里一直在搞这个，我只是一无所获。使用此处找到的 jquery 数据表时。http://datatables.net/examples/api/editable.html（似乎是一个非常流行的插件）除了可编辑的单元格部分之外，我几乎可以获得我想要工作的所有内容。我的文件按此顺序排列
<script src="JS/jquery.js"></script>
<script src="JS/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="JS/jquery.jeditable.js"></script>
<script src="JS/jquery.validate.js"></script>
<script src="JS/ColReorder.min.js"></script>
<link href="JS/css/jquery.dataTables.css" rel="stylesheet" />
and then I have this script to get the table initialized.
然后我有这个脚本来初始化表。
function formattable(thistable) {
//alert(thistable + " from format table")
// $(document).ready(function () {
// ADPControlProcessor_Table1
//$("#ADPControlProcessor_GridView1").dataTable();
var oTable = $("#ADPControlProcessor_GridView1").dataTable({
//"bFilter": true,
"sScrollY": "200px",
"bPaginate": false,
"bAutoWidth": false,
"sDom": 'Rlfrtip'
//});
//alert("running");
});
//var oTable = $('#example').dataTable();
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable('../examples_support/editable_ajax.php', {
"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"
});
I dont know what elese to try. can anyone point me in the right direction.
我不知道该尝试什么。任何人都可以指出我正确的方向。
回答by Elliott
Instead of paying for the editable plugin I built my own which you're free to use. 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());
}
回答by Sonu Sindhu
you are not initialize correct Try this one
你没有正确初始化试试这个
$(document).ready(function() {
/* Init DataTables */
var oTable = $('#example').dataTable();
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable( '../examples_support/editable_ajax.php', {
"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"
} );
} );
here is live example click here
这是现场示例单击此处
