1

SQLクエリ結果のシンプルなインターフェースを構築しています。

私は DataTables を使用することを選択し、それを使用して次のようなものを作成しました。

http://live.datatables.net/izavon/18/edit#javascript,html,live

あるテーブルから別のテーブルに行を移動する際に問題があります。現在、仕事をする2つの関数がありますが、私のソリューションは一方向にしか機能しないため、1つの関数が必要です。あるテーブルから別のテーブルに移動するだけですもの。

$(".deleteMe1").on("click", function (event) {
    var row = $(this).closest("tr").get(0);
    var addElement = oTable1.fnGetData(row);
    oTable2.fnAddData(addElement);
    // Remove Element from the source table
    var removeElement = oTable1.fnGetPosition(row);
    oTable1.fnDeleteRow(removeElement, null, true);
});

$(".deleteMe2").on("click", function (event) {
    var row = $(this).closest("tr").get(0);
    var addElement = oTable2.fnGetData(row);
    oTable1.fnAddData(addElement);
    // Remove Element from the source table
    var removeElement = oTable2.fnGetPosition(row);
    oTable2.fnDeleteRow(removeElement, null, true);
});

私の質問は次のとおりです。上記の機能を1つにマージする方法。

4

1 に答える 1

2

行が変化しているので、クリック イベントが $(document) にバインドされ、2 番目のパラメーターでフォーカスされている場合は、削除ボタンを .on を使用して下部の変更されていない要素にバインドします。

$(document).on("click", '.deleteMe', function (event) 
{
    // Get the id of the clicked table for comparison
    var id = $(this).closest('table').attr('id');

    // Assign the tables to the table object
    var table = {
        primary : (id === 'example1') ? oTable1 : oTable2,
        secondary : (id !== 'example1') ? oTable1 : oTable2
    };

    // Instead of calling the tables in seperate functions just use the  dynamically
    // assigned table.primary.x() and table.secondary.x()
    var row = $(this).closest("tr").get(0);

    var addElement = table.primary.fnGetData(row);

    table.secondary.fnAddData(addElement);

    var removeElement = table.secondary.fnGetPosition(row);

    table.primary.fnDeleteRow(removeElement, null, true);

});

上記を使用した更新されたデータテーブルの例

これは、削除ボタンがクリックされたテーブルに応じて、両方の方法で機能します。プライマリ/セカンダリ テーブル変数をハードコーディングするか、.on 関数をクラスの 2 番目のパラメータにすることで、簡単に一方向または双方向で動作するように変更できます。 1 つのテーブルで使用されます。

テーブルで更新を実行するには、次の行を上記の関数の最後に追加します。

oTable1.fnDraw();

これにより、新しい行が追加または削除されるたびにテーブルが強制的に再描画されます。これは、次のように使用できるので便利です。

"fnDrawCallback": function() {
    console.log('draw callback executed');
 };

データテーブルオブジェクト内で、何が起こるべきかを正確に指定します。フッターの更新、関連する ajax データのプルなど。

お役に立てれば。

于 2012-09-12T10:06:32.347 に答える