Question

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

代码如下：

ggplot(mpg, aes(x = hwy, y = cty)) +
  geom_point() +
  facet_grid(class ~ fl, scales = "free_y")

这是我的format（）函数：

//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');
        }
    });

在上面的功能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; }中只是xml响应。

现在，我想仅使用一个按钮soapGetResultslist.responseXml来一次展开/折叠所有行，如下所示：

+/-

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

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

仅当以前没有单独扩展/折叠行中的任何一行时，我才能一次扩展/折叠所有行。

例如：

如果一行单独扩展一次（假设第一行），那么如果我们尝试通过单击按钮// 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'); });一次扩展所有行，则除第一行外所有行都将被扩展（这次，第一行将不符合预期而折叠）。

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

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

Answer 1

之所以发生，是因为您在每行上执行一个事件“单击”。如果一行已被扩展，则可以再次将其折叠。

也许这些链接可以帮助您

jQuery DataTables: How to expand/collapse all child rows

DataTables - Open all Child Rows on Page Load

Answer 2

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

一种可能的实现方式：

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

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

同样，如果所有行都被扩展而只有一个，则检查表是否具有“ expanded”类，然后折叠所有行并保持当前折叠的行折叠。

//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');
});

然后在您的事件监听器中定位该目标。

jQuery数据表能够扩展/折叠所有行，除了之前已扩展/折叠的单个行

2 个答案: