javascript - 展开和折叠 html 表中的 3 级分层行

Question

我在表结构中有一些分层数据，如下所示:(示例 1)

A 
  A.1 
    A.1.1 
    A.1.2 
  A.2 
    A.2.1
    A.2.2
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

我希望能够在每个级别内展开和折叠，例​​如，如果我点击 A.2，它的子级应该折叠:(示例 2)

A 
  A.1 
    A.1.1 
    A.1.2 
  A.2 
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

如果我点击 A，它的所有子项都应该折叠:(示例 3)

A 
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

如果我再次展开 A，A.2 仍应保持折叠状态(隐藏子项)(示例 4)

A 
  A.1 
    A.1.1 
    A.1.2 
  A.2 
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

我已经尝试了来自 http://jsfiddle.net/y4Mdy/1124/ 的代码示例-- 但不处理三级层次结构。 $(this).nextUntil 似乎工作得很好，但是当下一个 tr 是父行时，它会折叠到下一个子行。此外，如果我折叠第 2 级然后折叠父级，则第 2 级被隐藏但第 3 级显示:

A 
    A.1.1 
    A.1.2       
B
  B.1
    B.1.1
    B.1.2
  B.2
    B.2.1
    B.2.2

我也试过http://jsfiddle.net/icc97/XNkbE/ -- 但是当点击父级别时子级别不会回到折叠状态(类似于我上面的示例 4)

有人能帮忙吗？

提前致谢。

Answer 1

此解决方案应处理任意数量的级别。

我原来的 jsfiddle 是 here .我会比这个答案更频繁地更新它。

$("tbody > tr:not([data-level='3'])").addClass("expandable sign folded");
$("tbody > tr:not([data-level='1'])").hide();
$("tbody > tr")
    .css("padding-left", function (index) {
    return 10 * parseInt($(this).data("level"), 10) + "px";
});

function range(lowEnd, highEnd) {
    // assert lowEnd >= 0 and highEnd < 100
    var validation = (lowEnd <= highEnd) && (lowEnd >= 0) && (highEnd < 100);
    if (!(validation)) {
        console.assert(validation, 
                       'Function "range" received unlikely values: ' +
                       lowEnd + ' and ' + highEnd + "...");
    } else {
        var arr = [];
        while (lowEnd <= highEnd) {
            arr.push(lowEnd++);
        }
        return arr;
    }
}

function name_range(fun, lowEnd, highEnd) {
    var arr = range(lowEnd, highEnd);
    jQuery.each(arr, function (index, value) {
        arr[index] = fun(value);
    });
    return arr;
}

function create_selector(level) {
    return "[data-level='" + level + "']";
}

$("tr.expandable").click(function () {
    var this_level = parseInt($(this).data("level"), 10);
    var this_level_selector = create_selector(this_level);
    var next_level_selector = create_selector(this_level + 1);
    var next_or_lower = name_range(create_selector,
    this_level + 1, 10); // TODO: find last level
    var this_or_higher = name_range(create_selector, 0, this_level);
    var node = $(this).prevUntil(this_or_higher.join(","));
    // different behaviour according to state (expanded / folded):
    if ($(this).hasClass("expanded")) {
        $(this).removeClass("expanded").addClass('folded');
        $(node).not("expanded").removeClass("expanded").addClass('folded');
        $(node).filter(next_or_lower.join(",")).hide();
    } else {
        $(this).addClass("expanded").removeClass('folded');
        $(node).filter(next_level_selector).show();
    }
});

table, tr, td, th {
    border: 1px solid black;
    border-collapse:collapse;
    border-color: gray;
}
tr:not([data-level='3']) {
    cursor:pointer;
    font-weight: bold;
}
tr.expanded .sign:after {
    content:"-";
}
tr.folded .sign:after {
    content:"+";
}
td:first-child {
    padding: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table border="0">
    <thead>
        <tr>
            <th colspan="4">Header</th>
        </tr>
    </thead>
    <tbody>
        <tr data-level='3'>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='3'>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='2'>
            <td>sub stores<span class="sign"></span>

            </td>
            <td>total</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='1'>
            <td>Trade<span class="sign"></span>

            </td>
            <td>total</td>
            <td>total</td>
            <td>data</td>
        </tr>
        <tr data-level='3'>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='2'>
            <td>sub stores<span class="sign"></span>

            </td>
            <td>total</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='3'>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='2'>
            <td>sub stores<span class="sign"></span>

            </td>
            <td>total</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr data-level='1'>
            <td>Stores<span class="sign"></span>

            </td>
            <td>total</td>
            <td>total</td>
            <td>data</td>
        </tr>
    </tbody>
</table>