一次打开一个行详细信息数据表？

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

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

虽然我仍然无法让减号图标在行折叠时显示加号图标。所以我决定删除减号图标本身并添加 selected 类以显示该行已被选中。

这里是代码：-

$('#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'));
        }

    }
}

将以下代码添加到 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');
    }
});

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

谢谢

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

当单击 $('.details-control') jquery 在 tr (this.parent()) 上添加类“详细信息” 您可以创建脚本从所有（'tbody tr'）中删除所有“详细信息”类并将其仅添加到 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');
    }
});

sn-p 将向下滑动该行并通过向上滑动关闭所有其他行，以便在 Datatable 表中一次只打开一行。

您将需要以下 css

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

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