Question

我正在尝试折叠树视图但无法执行此操作请帮助我，您可以在下面查看添加的代码段。我希望树视图最初可以折叠每个节点，因为它应该扩展特定节点。

例如，当我运行此代码时，应显示 item1 和 item5 。当我点击 item1 时，它应显示 item2 和 item4 而不是 item3 。现在你可以理解我的问题了。

＆＃13;

$(function() {
    $('#mytable').on('click', '.toggle', function () {
        //Gets all <tr>'s  of greater depth
        //below element in the table
        var findChildren = function (tr) {
            var depth = tr.data('depth');
            return tr.nextUntil($('tr').filter(function () {
                return $(this).data('depth') <= depth;
            }));
        };

        var el = $(this);
        var tr = el.closest('tr'); //Get <tr> parent of toggle button
        var children = findChildren(tr);

        //Remove already collapsed nodes from children so that we don't
        //make them visible. 
        //(Confused? Remove this code and close Item 2, close Item 1 
        //then open Item 1 again, then you will understand)
        var subnodes = children.filter('.expand');
        subnodes.each(function () {
            var subnode = $(this);
            var subnodeChildren = findChildren(subnode);
            children = children.not(subnodeChildren);
        });

        //Change icon and hide/show children
        if (tr.hasClass('collapse')) {
            tr.removeClass('collapse').addClass('expand');
            children.hide();
        } else {
            tr.removeClass('expand').addClass('collapse');
            children.show();
        }
        return children;
    });
});

＆＃13;

table td {
    border: 1px solid #eee;
}
.level1 td:first-child {
    padding-left: 15px;
}
.level2 td:first-child {
    padding-left: 30px;
}

.collapse .toggle {
    background: url("http://mleibman.github.com/SlickGrid/images/collapse.gif");
}
.expand .toggle {
    background: url("http://mleibman.github.com/SlickGrid/images/expand.gif");
}
.toggle {
    height: 9px;
    width: 9px;
    display: inline-block;   
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="mytable">
    <tr data-depth="0" class="collapse level0">
        <td><span class="toggle collapse"></span>Item 1</td>
        <td>123</td>
    </tr>
    <tr data-depth="1" class="collapse level1">
        <td><span class="toggle"></span>Item 2</td>
        <td>123</td>
    </tr>
    <tr data-depth="2" class="collapse level2">
        <td>Item 3</td>
        <td>123</td>
    </tr>
    <tr data-depth="1" class="collapse level1">
        <td>Item 4</td>
        <td>123</td>
    </tr>
    <tr data-depth="0" class="collapse collapsable level0">
        <td><span class="toggle collapse"></span>Item 5</td>
        <td>123</td>
    </tr>
    <tr data-depth="1" class="collapse collapsable level1">
        <td>Item 6</td>
        <td>123</td>
    </tr>
</table>

＆＃13;

Answer 1

你只需要更新你的html并将其设置为你想要的默认模式。请用这个替换你的HTML。

<table id="mytable">
    <tr data-depth="0" class="expand level0">
        <td><span class="toggle collapse"></span>Item 1</td>
        <td>123</td>
    </tr>
    <tr data-depth="1" class="collapse level1" style="display: none;">
        <td><span class="toggle"></span>Item 2</td>
        <td>123</td>
    </tr>
    <tr data-depth="2" class="collapse level2" style="display: none;">
        <td>Item 3</td>
        <td>123</td>
    </tr>
    <tr data-depth="1" class="collapse level1" style="display: none;">
        <td>Item 4</td>
        <td>123</td>
    </tr>
    <tr data-depth="0" class="expand collapsable level0">
        <td><span class="toggle collapse"></span>Item 5</td>
        <td>123</td>
    </tr>
    <tr data-depth="1" class="collapse collapsable level1" style="display: none;">
        <td>Item 6</td>
        <td>123</td>
    </tr>
</table>

最初崩溃树视图css表

1 个答案: