JS表格行展开/折叠优化需求：初始折叠+全展开/折叠按钮

没问题，我来帮你把这两个需求搞定！结合你现有的代码，我会给出完整的修改方案，保证和原功能完美兼容：

1. 先实现初始折叠状态 #

页面加载完成后，我们需要隐藏所有非"Grandparent"层级的行，只保留顶级行显示。假设你的表格里子行是通过data-depth属性或者特定类名和父行关联的，我们可以在初始化逻辑里直接处理：

2. 添加"全部展开"/"全部折叠"控制链接 #

在表格上方添加两个操作链接，分别绑定点击事件来控制所有行的展开/折叠状态。

完整修改后的代码示例 #

$(function() {
    // 1. 初始折叠：隐藏所有非Grandparent层级的行
    // 这里假设Grandparent行的data-depth为0，子行depth≥1，可根据实际HTML调整选择器
    $('#mytable tr[data-depth="1"], #mytable tr[data-depth="2"]').hide();

    // 原有的行展开/折叠逻辑（保留你原来的代码）
    $('#mytable').on('click', '.toggle', function () {
        var findChildren = function (tr) {
            var depth = tr.data('depth');
            return tr.nextUntil($('tr').filter(function () {
                return $(this).data('depth') <= depth;
            }));
        };

        var children = findChildren($(this).closest('tr'));
        children.toggle();
        // 可在这里切换toggle按钮的图标/文字，比如+变-，反之亦然
    });

    // 2. 全部展开功能
    $('#expand-all').on('click', function(e) {
        e.preventDefault();
        $('#mytable tr[data-depth="1"], #mytable tr[data-depth="2"]').show();
        // 如果需要同步更新toggle按钮状态，可在这里统一处理（比如把所有+换成-）
    });

    // 3. 全部折叠功能
    $('#collapse-all').on('click', function(e) {
        e.preventDefault();
        $('#mytable tr[data-depth="1"], #mytable tr[data-depth="2"]').hide();
        // 同步更新toggle按钮状态（把所有-换成+）
    });
});

对应的HTML部分（添加控制链接） #

在你的表格前加上这两个操作链接：

<a href="#" id="expand-all">全部展开</a> | <a href="#" id="collapse-all">全部折叠</a>

<table id="mytable">
    <!-- 示例表格结构 -->
    <tr data-depth="0">
        <td><span class="toggle">+</span> Grandparent 1</td>
    </tr>
    <tr data-depth="1">
        <td>Parent 1</td>
    </tr>
    <tr data-depth="2">
        <td>Child 1</td>
    </tr>
    <tr data-depth="0">
        <td><span class="toggle">+</span> Grandparent 2</td>
    </tr>
    <!-- 更多行... -->
</table>

注意事项 #

• 如果你的子行不是用data-depth区分，而是用特定类名（比如.child-row），请把选择器改成$('#mytable .child-row')即可。
• 如果原代码里的toggle按钮有状态变化（比如+/-图标切换），记得在全部展开/折叠时同步更新这些按钮的状态，保持UI一致性。

内容的提问来源于stack exchange，提问作者Mr_Thomas