1

データテーブルで開いているすべてのtrをonClickで閉じるボタンを作成しようとしています。

次のコマンドで行を開いています：

oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'newtr');

データテーブルで開いているすべてのtr行を閉じる可能性はありますか？

4

2 に答える 2

1

データテーブルを初期化した後、すべてのtrでクリックイベントをバインドし、以下を使用して選択した行を閉じることができます。

oTable.$('tr').click(function(){
   if ( oTable.fnIsOpen(this) ) {
      oTable.fnClose( this );
   }
});

datatable APIの詳細については、こちらをご覧ください。

于 2013-03-20T09:10:43.883 に答える
1

私が2番目の行を開いたときに前の行を閉じたいということと同じことを達成しようとしていると思います。

つまり、一度に1行の詳細しか表示できません。

$(document).ready(function () {
    var previousTr;
    oTable = $('#bookingstable').dataTable
         ({
             "aoColumnDefs": [
                 { "bVisible": false, "aTargets": [2, 6, 7, 8, 9, 12, 13, 14, 15] }
             ]
         });


    $('#bookingstable tbody td').live('click', function () {
        var selectedTr = $(this).parents('tr')[0];
        if (oTable.fnIsOpen(previousTr)  && previousTr != selectedTr)) {
            oTable.fnClose(previousTr);
        }
        if (oTable.fnIsOpen(selectedTr)) {
            oTable.fnClose(selectedTr);
        }
        else {
            oTable.fnOpen(selectedTr, fnDetailsRow(selectedTr), 'details-row');
            previousTr = selectedTr;
        }
    });
});
function fnDetailsRow(selectedTr) {
    var TrData = oTable.fnGetData(selectedTr);
    var detailsRow = '<table border="0">';
    detailsRow += '<tr><td class="space" rowspan="4"><br /><h1>⇉&lt;/h1></td><td     class="LabelField">Passenger Name</td><td class="ValueField">' + TrData[3] + '</td><td class="LabelField" rowspan="2">Pickup Details</td><td class="ValueField" rowspan="2">' + TrData[14] + '</td><td class="LabelField" rowspan="2">Customer Notes</td><td class="ValueField" rowspan="2">' + TrData[9] + '</td></tr>';
    detailsRow += '<tr><td class="LabelField">Phone Number</td><td class="ValueField">' + TrData[2] + '</td></tr>';
    detailsRow += '<tr><td class="LabelField">Car Type</td><td class="ValueField">' + TrData[6] + '</td><td class="LabelField" rowspan="2">Dropoff Details</td><td class="ValueField"  rowspan="2">' + TrData[15] + '</td><td class="LabelField" rowspan="2">Office Notes</td><td class="ValueField" rowspan="2">' + TrData[12] + '</td></tr>';
    detailsRow += '<tr><td class="LabelField">Pax and Bags</td><td class="ValueField">' + TrData[7] + ' Paxs & ' + TrData[8] + ' Bags' + '</td></tr>';
    return detailsRow;
}

2行目を開く前に、ドキュメントの準備ができていることを宣言し、var previousTrチェックしていることに注意してください。もちろん、新しい行を開いたら、もう一度設定することを忘れないでください。

于 2013-03-27T18:03:50.323 に答える