我有一个PHP页面,我正在使用DataTable(jQuery)插件来显示数据库中的所有数据。
这里我想给用户提供添加新行的选项,即用户输入数据的新记录。我按照以下示例进行了说明:
http://www.datatables.net/examples/api/add_row.html
并且能够创建一个新行。
但我完全不确定如何为正在生成的内容添加“id”属性,而且,我不确定如何使其可编辑。
截至目前,所有其他字段均可使用jeditable进行编辑。
代码如下:
$(document).ready(function() {
/* Init DataTables */
var oTable = $('#example').dataTable({
"iDisplayLength": 5,
//"bRetrieve": true,
"aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]]
}
);
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable( 'expenseFieldsUpdater.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],
"form_id": document.getElementById('formID').value
};
},
"height": "14px"
} );
} );
var giCount = 1;
function fnClickAddRow() {
$('#example').dataTable().fnAddData( [
".1",
giCount+".2",
giCount+".3",
giCount+".4",
giCount+".5" ] );
giCount++;
}
但是,我完全不确定如何使其可编辑。 任何指针都会非常有用。
我在datatables网站上发现了以下帖子,但无法理解如何使它们工作:
http://datatables.net/forums/comments.php?DiscussionID=181
答案 0 :(得分:2)
您可以找到一个可以帮助您http://code.google.com/p/jquery-datatables-editable/的插件。该插件增强了标准的JQuery DataTables插件,并处理添加,删除和编辑操作。 你可以在那里下载HTML示例。
答案 1 :(得分:1)
我通常发现在添加或编辑行之后,我需要重新运行$(document).ready事件来装饰表行。所以你应该重构一下这个电话:
$('td', oTable.fnGetNodes()).editable()
进入一个单独的方法,你可以从$(document).ready和fnClickAddRow()调用。