jQuery DataTable - 添加新行有效,但无法编辑(jeditable)

5
我有一个使用了DataTable(jQuery)插件的PHP页面,用于显示来自数据库的所有数据。
在这里,我想给用户提供添加新行的选项,即为用户输入数据添加新记录。我遵循了以下示例:

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
2个回答

2

1

我通常发现在添加或编辑行后,需要重新运行$(document).ready事件来装饰表格行。因此,您应该重构调用:

$('td', oTable.fnGetNodes()).editable()

将其转换为一个单独的方法,您可以从$(document).ready和fnClickAddRow()中调用。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接