jQuery 展开/折叠分层表格行

Question

我正在寻找一种使用 jQuery 展开/折叠分层表行的有效方法。问题是，展开和折叠功能不同。

• 最初，仅显示类 level_0 的行，所有其他行均隐藏。
• 展开应该只显示下一个级别，因此单击行 id=10 应该只会生成具有 id=11 和 id= 的行14 可见。
• 另一方面，折叠应该折叠比当前行更深的所有连续行。例如，单击行 id=10 上的折叠应该隐藏 ID 为 11, 12, 13, 14 的行（如果它们可见）。

表数据如下所示：

<table id="mytable">
    <tr class="level_0" id="10">...</td>
    <tr class="level_1 parent_10" id="11">...</td>
    <tr class="level_2 parent_11" id="12">...</td>
    <tr class="level_2 parent_11" id="13">...</td>
    <tr class="level_1 parent_10" id="14">...</td>
    <tr class="level_0" id="15">...</td>
</table>

---

我的非工作解决方案：

$('#mytable tr').live('click', function() {
  var toggleClass = 'parent_' + $(this).attr('id');
  $(this).nextAll('tr').each(function() {
    if ($(this).is('.'+toggleClass)) {
      $(this).toggleClass("showme");
    }
  });
});

问题是，它只折叠下一级行。仍显示单击的行下方的可见和更深层次的行。

---

谁能给我一些关于如何有效地做到这一点的提示？如果需要，可以调整 HTML 代码。

感谢您的任何提示。

Answer 1

我创建了一个多层次层次结构的版本作为另一个问题的答案。

您的表的 jQuery 将是：

var treeTable = {
    parentClassPrefix : '',
    collapsedClass : 'collapsed',
    init : function(parentClassPrefix) {
        this.parentClassPrefix = parentClassPrefix;
        $('table').on('click', 'tr', function () { 
            treeTable.toggleRowChildren($(this));
        });
    },
    toggleRowChildren : function(parentRow) {
        var childClass = this.parentClassPrefix+parentRow.attr('id');
        var childrenRows = $('tr', parentRow.parent()).filter('.'+childClass);
        childrenRows.toggle();
        childrenRows.each(function(){
            if (!$(this).hasClass(treeTable.collapsedClass)) {
                treeTable.toggleRowChildren($(this));
            }
        });
        parentRow.toggleClass(this.collapsedClass);
    }
};

treeTable.init('parent_');

请参阅此 JSFiddle 来了解它的工作原理。

优化

我的表结构略有不同，其中涉及指定父级和子级，以便搜索更加高效。

然后我还制作了一个 jQuery 分层表行切换 Gist 并将其转换为对象化带有优化的 javascript。优化来自 http://24ways.org/2011/your -jquery-now-with-less-suck/。

具体来说：

表上而不是行上的事件委托。

$('table').on('click', 'tr.'+treeTable.parentClass, function () {
    treeTable.toggleRowChildren($(this));
});

缓存子级选择。

在 .childClass 上使用较快的元素选择器，然后使用较慢的过滤器< /强>

var childrenRows = $('tr', parentRow.parent()).filter('.'+childClass);

Answer 2

我认为您需要更多代码，以便可以处理关闭和打开状态下所有行的点击。

我添加了一个类开关来指示行何时打开，并根据其状态以不同方式处理点击。 collapse 和 expand 都有 while 循环遍历行，从紧邻单击的行之后的行开始，当到达同一级别的行时停止。这个逻辑应该适用于任何级别，而不仅仅是 0。此外，使用 nextUntil 逻辑和一个花哨的选择器， while 循环可能会更干净 - 我对此并不熟悉jQuery 方法，直到看到 Jules 的回答 - 非常狡猾！

另外，为了使示例代码更简单，我将关卡类命名系统视为 HTML 数据属性，因此给定行如下所示： < /代码>。您可以将对 .data 的调用替换为解析类名的代码。

var $rows = $('#mytable tr');

$rows.live('click', function() {
$(this).toggleClass('open');

if ($this.hasClass('open')){
    collapse($(this));
} else {
    expand($this);
}
}

function collapse ($row) {
    $row.removeClass('open');
var rowIndex = $rows.index($row);
var siblingOrAncestorRowFound = false;

while (!siblingOrAncestorRowFound){
    var $nextRow = $rows.eq(rowIndex + 1);
    if ($nextRow.level  > $row.level){
        $nextRow.hide().removeClass('open');
        rowIndex++;
    } else {
        siblingOrAncestorRowFound = true;
    }
}
}

function expand ($row) {
    $row.addClass('open')
var rowIndex = $rows.index($row);
var siblingOrAncestorRowFound = false;

while (!siblingOrAncestorRowFound){
    var $nextRow = $rows.eq(rowIndex + 1);
    if ($nextRow.level  > $row.level){

        // only show rows exactly one level below
        if ($nextRow.level == $row.level + 1){
            $nextRow.show();
        }

        rowIndex++;
    } else {
        siblingOrAncestorRowFound = true;
    }
}
}

（这还没有经过测试 - 抱歉，我得解雇了！）

Answer 3

您帖子中的表格 html 无效（tr 包含在 td 中）。在结构正确的表上，此代码可以工作。

$("tr.level_0").live("click", function () {
  $(this).nextUntil(".level_0").toggle();
});