4

jQuery Datatable で単純なインライン編集を実装しようとしています。しかし、行セルをクリックしたときに発生する編集をアクティブにすることはできません。私は彼らのサイトのリンクと同じコードを使用しました:

<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%"
            });

どんな提案でも大歓迎です。

4

1 に答える 1

19

約 2 行のコードでこれを行うプラグインを作成しました。それは小さくてかなり基本的ですが、仕事を成し遂げます. リポジトリはここにあります: DataTables CellEdit Plugin

基本的な初期化は素早く簡単です:

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

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

更新:これは過去数か月にわたってゆっくりと成長しており、この回答を最初に投稿したときよりもかなり多くの機能が追加されています。参加してくださったすべての貢献者に感謝します。

于 2016-03-28T16:15:30.507 に答える