Jquery datatable 能够展开/折叠除之前已经展开/折叠的单个行之外的所有行答案

【问题标题】：Jquery datatable is able to expand/collapse all the rows except the individual row that is already expanded/collapsed beforeJquery datatable 能够展开/折叠除之前已经展开/折叠的单个行之外的所有行
【发布时间】：2019-01-11 11:37:07
【问题描述】：

我是 Jquery 的新手。我有一个数据表，其中每个单独的行都可以展开/折叠，以在单击父行时将子项显示为包含更多行的动态表。单独单击行时，我的代码可以轻松运行。

代码如下：

//expand or collapse any case

    $(".dataTables_scrollBody").find(".details-control").on("click", function () {

        var tr = $(this).closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            var td = $(this).parent('td');


            row.child(format(row)).show()
            tr.addClass('shown');
        }
    });

这是我的 format() 函数：

function format(row) {
    //we already stored formatted CKEY info on the formattedCKEY node. So get it from the selected case row
    var formattedCKEY = row.data()[1];
    var cases = $(soapGetResultslist.responseXml).find("formattedCKEY:contains(" + formattedCKEY + ")").prevAll("issue");
    var issuetable = '<table id="IssuesTable" class="stripe nowrap" style="position:relative; top:0px; width:95%;">' +
        '<thead>' +
        '<tr>' +

        '<th>Issue ID</th>' +
        '<th>Subject</th>' +

        '<thead>' +
        '</tr>' + '<tbody>' + '<tr>';

    $.each(cases, function () {

        issuetable = issuetable + '<tr>' + '<td>' + $(this).find("IKEY").text() + '</td>' +
            '<td>' + $(this).find("SUBJECT").text() + '</td>' + '</tr>'
    });

    issuetable = issuetable + '</tbody>' + '</tr>' + '</table>';
    return issuetable;
}

在上面的函数中soapGetResultslist.responseXml只是xml响应。

现在我想只使用一个按钮 +/- 一次展开/折叠所有行，如下所示：

<td style="width:135px;" ><button id="expand-collapse-button" >+/-</button></td>

我添加了以下 jquery 代码来一次展开/折叠：

// Handle click on "+/-(expand all or collapse all)" 
            $("#expand-collapse-button").click( function() {
             // Expand row details
                table.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');
             });

只有当任何一行之前没有单独展开/折叠时，我才能一次展开/折叠所有行。

例如：

如果一行被单独展开（比如说第一行）一次，那么如果我们尝试通过点击按钮+/- 一次展开所有行，除了第一行（第一行）之外的所有行都会被展开这次第一行将按预期折叠）。

有人可以分享他们关于如何克服这种情况的想法/代码吗？

如果我的问题不清楚，请告诉我。

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

您已将其记录在您的代码// This row is already open - close it 中，所以当您触发点击事件时，它会执行此操作。

一种可能的实现方式：

当通过+/- 按钮展开时，向整个表添加一个类。

在您的 if 语句中，您可以检查表是否具有“扩展”类。如果是，则不要折叠任何展开的行。

同样，如果所有行都展开但只有一个，检查表是否具有“展开”类，如果没有，则折叠所有行并保持当前折叠的行折叠。

//EXPAND ALL ROWS BUTTON
$("#expand-collapse-button").click( function() {
    // Expand row details

    if($('#IssuesTable').hasClass('expanded')){
       $('#IssuesTable').removeClass('expanded');
    }else{
        $('#IssuesTable').addClass('expanded');
    }

    table.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');
});

然后在你的事件监听器中定位它。

【讨论】：

感谢您的回复。抱歉我的延迟回复。在我的情况下，IssuesTable 是一个动态表。您能否详细说明您的答案。我有点困惑。

【解决方案2】：

发生这种情况是因为您在每一行上都执行了“点击”事件。如果一行已经展开，通过这样做你会再次折叠它。

也许这些链接可以帮助你

jQuery DataTables: How to expand/collapse all child rows

DataTables - Open all Child Rows on Page Load

【讨论】：