web-dev-qa-db-ja.com

エディタープラグインを使用しないデータテーブルのインライン編集

私はデータテーブルに「エディター」プラグインを使用していましたが、次のコードがありました：

次のように定義されたデータテーブルエディター：

        editor = new $.fn.dataTable.Editor( {
        ajax: '/contact/' + Contact.id,
        table: "#contact-datatable",
        fields: [ {
                    name: "id",
                  }, {
                    name: "category",
                    type: "check",
                    options: [
                              { label: 'Science', value: "Science" },
                              { label: 'Maths', value: 'Maths' },
                              { label: 'Economics', value: 'Economics' },
                             ]
                 }
                    ................
              ]
    });

.....

$('#contact-datatable').on( 'click', 'tbody td:not(:first-child)', function (e) {
                editor.inline( this, { submitOnBlur: true } );
            } );

これをページに添付：カテゴリをクリックすると、編集用のドロップダウンが表示されます（エディタープラグインを使用）。

しかし、問題は、データテーブルのエディタープラグインがオープンソースではなく、私のプロジェクトでは支払い可能なプラグインがまったく許可されていないことです。

「エディター」プラグインを使用せずに、データテーブルでのインライン編集を手伝ってください。

以下は、エディターなしで書いたコードです。

Contact.dataTable = $('#contact-datatable').dataTable( {
        "ajax": {
                "url" : '/Contact/list/' + Contact.id,
                "dataSrc": function(check) {
                   check.id = Contact.id;
                   return json.check;
                  },
                },
            "responsive": true,
            "order": [],
            "columns": [
                { "data": "id"},
                { "data": "category" },
                { "data": "course" },
                ]
        } );

カテゴリとコースはドロップダウンになります-これはインラインで編集する必要があります。以下にページの例を添付します。

インラインエディターのドロップダウンとして「Category」が必要です。保存するボタンがあります enter image description here

enter image description here

javascriptdrop-down-menudatatableseditor
19
Futuregeek

データテーブルが揺れる！また、SpryMediaを使用して無料でプレイできます。 Editor Pluginを購入したにもかかわらず使用したことが100％確実ではありませんが、何らかの形でその開発に貢献できたことを嬉しく思います。プラグインを使用しなかった主な理由の1つは、しばらくの間それを購入する余裕がなかったので、自分のバージョンを書いたので、それほど難しくないからです。手順は非常に簡単です。

  • 行のクリックを検出します（すでにこれを実行しています）
  • 行からデータを取得します（まったく難しくありません）
  • フォームにそのデータを入力します（おそらくモーダル内）
  • フォームが送信されたら、サーバーを新しい値で更新します
  • サーバーが更新されたら、行を更新します

このプラグインにより、すべてが簡単になり、バックエンドも把握できます。上記の手順はそれほど難しくはありませんが、Editorプラグイン以外のすべての機能を実現できるものはありません。手順を実行すると、そこに着きます。

20
annoyingmouse

インライン編集用の独自のコードを作成し、完全な行を編集して、ユーザーが編集したい列を定義できるようにしました。

ここ： https://github.com/sinhashubh/datatable-examples

これを行う手順：

  1. クリックした行/セルでもクリックを処理します。

               $("#dtexample tbody").on('click', 'tr td', function (e) {
                RoweditMode($(this).parent());
            });

        function RoweditMode(rowid) {
            var prevRow;
            var rowIndexVlaue = parseInt(rowid.attr("indexv"));
            if (editIndexTable == -1) {
                saveRowIntoArray(rowid);
                rowid.attr("editState", "editState");
                editIndexTable = rowid.rowIndex;
                setEditStateValue(rowid, rowIndexVlaue + 2);
            }
            else {
                prevRow = $("[editState=editState]");
                prevRow.attr("editState", "");
                rowid.attr("editState", "editState");
                editIndexTable = rowIndexVlaue;
                saveArrayIntoRow(prevRow);
                saveRowIntoArray(rowid);
                setEditStateValue(rowid, rowIndexVlaue + 2);
            }
        }
       function saveRowIntoArray(cureentCells) {
            $.each(ColumnData, function (index, element) {
                if (element.Editable == true) {
                    var htmlVal = $($(cureentCells).children('.' + element.Name)[0]).html();
                    EditRowData[element.Name] = htmlVal;
                }
            });
        }
        function setEditStateValue(td1, indexRow) {
            for (var k in EditRowData) {
                $($(td1).children('.' + k)[0]).html('<input value="' + EditRowData[k] + '" class="userinput"  style="width: 99% " />');
            }
        }

  2. 入力後Enterを押すと、入力入力をバインドします（必要に応じて保存ボタンに変更できます。

        $("#dtexample tbody").on('keyup', 'input.userinput', function (e) {
                if (e.keyCode == 13) {
                         updateRowData(this.parentNode.parentNode);
                }
            });

  3. パラメータを使用してサーバーを呼び出すための関数を更新します。

             function updateRowData(currentCells) {
            var table = $("#dtexample").DataTable();
            var row = table.row(currentCells);
            rowid = currentCells.getAttribute('id');
            var UpdateRowData = [];
            $.each(ColumnData, function (index, element) {
                if (element.Editable==true) {
                    UpdateRowData.Push({
                        'pname': element.Name , 'pvalue': $($($(currentCells).children('.' + element.Name)).children('input')[0]).val()
                    });
                }
            });
            console.log(UpdateRowData);
            UpdateRowData.Push({ 'pname': 'rowid', 'pvalue': rowid });
            var parameter = "";
            for (i = 0; i < UpdateRowData.length; i++) {
                if (i == UpdateRowData.length - 1)
                    parameter = parameter + UpdateRowData[i].pname + "=" + UpdateRowData[i].pvalue;
                else
                    parameter = parameter + UpdateRowData[i].pname + "=" + UpdateRowData[i].pvalue + "&";
            }
            $.ajax({
                type: 'POST',
                url: '/WebService.asmx/UpdateTableData',
                data: parameter,
                success: function (data) {
                    var table = $('#dtexample').DataTable();
                    table.draw('page');
                }
            });
        }
1
shubham