如何在 html/css/js 中创建折叠树形表格？

我有一些要显示的数据，这些数据既是表格形式的又是分层的。我想让用户能够展开和折叠节点。

除了功能性之外，有点像这样：

http://www.maxdesign.com.au/articles/tree-table/ http://www.maxdesign.com.au/articles/tree-table/

解决这个问题的最佳方法是什么？我并不反对使用现成的插件。

光滑网格 https://github.com/mleibman/SlickGrid具有此功能，请参阅树演示 http://mleibman.github.io/SlickGrid/examples/example5-collapsing.html.

如果您想构建自己的，这里有一个示例（jsFiddle 演示 http://jsfiddle.net/Vd5BH/5/): 构建你的表data-depth属性来指示树中项目的深度（levelXCSS 类仅用于样式缩进）：

<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>
</table>

然后，当单击切换链接时，使用 Javascript 隐藏所有内容<tr>元素直到<tr>发现深度相等或更小的（不包括那些已经塌陷的）：

$(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;
    });
});