Question

所以，

有一个例子https://datatables.net/examples/server_side/row_details.html

如何一次只打开一行详细信息，如果单击其他行，则先前打开的行详细信息会关闭？

有什么建议吗？

所以这是我的新代码，我展示的行详细信息还有另外两种格式（case1，case2）

var tr = $(this).closest('tr');
var row = dt.row(tr);
var idx = $.inArray(tr.attr('id'), detailRows);

if (row.child.isShown()) {
    tr.removeClass('details');
    row.child.hide();

    // Remove from the 'open' array
    detailRows.splice(idx, 1);
} 
else {

    // Add to the 'open' array
    if (idx === -1) {
        detailRows.push(tr.attr('id'));
    }

    if (dt.cell('.details', 1).data() == "SIRE" || dt.cell('.details', 1).data() == "CDI" || dt.cell('.details', 1).data() == "Terminal" || dt.cell('.details', 1).data() == "Other") {
        row.child(case1(row.data())).show();
    }
    else {
        row.child(case2(row.data())).show();
    }
}

Answer 1

我感谢大家宝贵的时间和精力。虽然我想出了如何让事情发挥作用。

虽然我仍然无法在行崩溃时显示减号图标以显示加号图标。所以我决定删除减号图标并添加选中类来显示该行已被选中。

以下是代码： -

$('#example tbody').on('click', 'tr td.details-control', function() {
    var tr = $(this).closest('tr');
    var row = dt.row(tr);
    var idx = $.inArray(tr.attr('id'), detailRows);
    if (row.child.isShown()) {
        //tr.removeClass('details');
        row.child.hide();
        // Remove from the 'open' array
        detailRows.splice(idx, 1);
    } else {
        dt.rows().eq(0).each(function(idx) {
            var trx = $(this).parent('tr');
            var row = dt.row(idx);

            if (row.child.isShown()) {
                console.log(trx);
                row.child.hide();
                tr.removeClass('details');
                console.log('enters');
            }
        });

        tr.addClass('details');

        if (dt.cell('.details', 1).data() == "SIRE" || dt.cell('.details', 1).data() == "CDI" || dt.cell('.details', 1).data() == "Terminal" || dt.cell('.details', 1).data() == "Other") {
            console.log(dt.cell('.details', 1).data());
            row.child(case1(row.data())).show();
        } else {
            console.log(dt.cell('.details', 1).data());
            row.child(case2(row.data())).show();
        }
        // Add to the 'open' array
        if (idx === -1) {
            detailRows.push(tr.attr('id'));
        }

    }
}

将以下代码添加到其他代码，确保在其他打开的单击

上关闭所有打开的行详细信息

dt.rows().eq(0).each(function(idx) {
    var trx = $(this).parent('tr');
    var row = dt.row(idx);

    if (row.child.isShown()) {
        console.log(trx);
        row.child.hide();
        tr.removeClass('details');
        console.log('enters');
    }
});

如果有人仍然找到我的问题的解决方案，我可以关闭打开的行详细信息但无法添加加号图标，请建议。

由于

Answer 2

我今天遇到了同样的情况，如果他处于相同的情况，这里有任何一个工作示例代码

$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

if ( row.child.isShown() ) {
     row.child.hide();
     tr.removeClass('shown');     
    }
else
    {
     //Below line does the trick :)
     if ( table.row( '.shown' ).length ) {
              $('.details-control', table.row( '.shown' ).node()).click();
      }
      row.child( format(row.data()) ).show();
      tr.addClass('shown');
 }
})

Answer 3

尝试更改第42-50行：

    else {
        $('#example tbody tr').each(
            function() {
               var row = dt.row( tr );
               if (row.child.isShown()) {
                    row.child.hide();
                    $(this).removeClass('details');
               }
            }
        ); // each
        detailRows=[];
        tr.addClass( 'details' );
        row.child( format( row.data() ) ).show();

        // Add to the 'open' array
        if ( idx === -1 ) {
            detailRows.push( tr.attr('id') );
        }
    }

Answer 4

点击$（＆＃39; .details-control＆＃39;）jquery add class＆＃34; details＆＃34; on tr（this.parent（））你可以创建脚本删除所有＆＃34;详细信息＆＃34;来自所有人的课程（＆＃39; tbody tr＆＃39;）并将其仅添加到this.parent（）

您可以使用此代码

  $('#example tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );

        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
             $('tbody tr').removeClass("details");
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();

            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

Answer 5

这里有一个仅打开一个行的示例，上下滑动了子行内容。

$('.slideTableRow td').on('click', function () {
    if (row.child.isShown()) {
        //slide up the opened row
        $('div.slider', row.child()).slideUp('fast', function () {
            row.child.hide();
            tr.removeClass('shown');
        });
    } else {
        //finds all open rows and simulates a click
        table.find('tr.shown').each(function () {
            $(this).find('td').first().click();
        });

        //add the contents you want in the child row div
        row.child('<div class="slider">' + content + '</div>', 'no-padding').show();
        tr.addClass('shown');

        //slide open the container
        $('div.slider', row.child()).slideDown('fast');
    }
});

该代码段将向下滑动一行，并随着向上滑动而关闭所有其他行，以便一次只在Datatable表中打开一行。

您将需要以下CSS

table.dataTable tbody td.no-padding {
    padding: 0;
}

table.dataTable div.slider {
    display: none;
}

一次打开一行详细信息Datatable？

5 个答案: