0

データテーブルで行選択が有効になっている場合、ユーザーが選択できる行数を制限する方法はありますか？ユーザーがデータテーブルで最大2行と最小1行を選択できるようにしたいのですが、これを行う方法を説明するオプションがDatatables APIに表示されませんか？

ユーザーが行を選択するたびにトリガーされるコールバックでこれを手動で実行する必要がありますか？できればこれは避けたいです。どんな助けや洞察も大歓迎です。

4

3 に答える 3

0

datatablesの例を使用する：

$(document).ready(function() {
    /* Add a click handler to the rows - this could be used as a callback */
    $("#example tbody tr").click( function( e ) {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        }
        // the following line do what you want
        else if(oTable.$('tr.row_selected').length < 2) {
            $(this).addClass('row_selected');
        }
    });

    /* Add a click handler for the delete row */
    $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        if ( anSelected.length !== 0 ) {
            oTable.fnDeleteRow( anSelected[0] );
        }
    } );

    /* Init the table */
    oTable = $('#example').dataTable( );
} );

参照：単一行を選択

于 2012-08-03T19:34:32.863 に答える
0

実装が機能するようになったので、ユーザーが選択できる行数を制限する代わりに、ユーザーが別の行をクリックするたびに以前に選択した行の選択を解除するロジックを追加しました。選択順序をキューとして扱いました。これは、配列を使用して実装したばかりで、新しい行をキューにプッシュするたびに、前の要素がポップされます。

キューのサイズによって、ユーザーが選択できる行数が決まります。キューのサイズを2に設定すると、最大2つの行を選択できます。追加の行を選択すると、最初に選択した行がキューから削除されます。以下のfnGetInstance（）関数とfnDeselect（）関数を使用して、データテーブルインスタンスから行を選択解除しました。

//oldRow = first selected row from queue

var oTT = TableTools.fnGetInstance( 'MyDataTable' );
oTT.fnDeselect( oldRow );
于 2012-08-14T23:01:29.813 に答える
0

別の回答ですでに指摘されているように、DataTablesからの単一行の選択例がありますが、残念ながら、完全に使用可能で説得力があるわけではありません。それらのソリューションがパッケージの外部にあることはコードから明らかですが、テストの経験からも、ネイティブの選択数が更新されていないことがわかります（そしてそれは良くありません）。

とにかく、上記の例の最も重要な部分（部分的に再利用したい場合）は、機能によってまだネイティブに管理されていない状況でイベントをキャッチする機能table.on( 'deselect',です。それはどのような状況ですか？Ctrl+click複数のアイテムを選択できます。したがって、新しいソリューション構造は次のようになります。

table.on( 'click', 'tr', function () {
    // https://stackoverflow.com/a/42266749/11323942
    if ( event.ctrlKey ) {
        //is ctrl + click
        console.log("ctrl + click intercepted but forcing single select")
        // NOW WHAT TO DO?
    }
} );

今やるべき最善のことは、コントロールをフレームワークの標準イベントに戻すことです。それで

// NOW WHAT TO DO?
table.rows({ selected: true }).deselect();

上記では、選択を1行に制限していますが、別の行数に拡張するのは簡単です。もちろん、適切な方法で必要なリセットアクションを実行できるようになりました。

table.on( 'deselect', function ( e, dt, type, indexes ) {
    if ( type === 'row' ) {
        var deselectedrow = indexes[0]
        console.log('deselected row', deselectedrow);
        // perform whatever reset action you might need
    }
} );
于 2021-01-27T15:05:45.510 に答える