如何在 html/css/js 中創建一個折疊樹表？

Question

我有一些數據要顯示，既是表格又是分層的。 我想讓用戶能夠展開和折疊節點。

有點像這樣，除了功能：

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

解決這個問題的最佳方法是什么？ 我不反對使用現成的插件。

Answer 1

SlickGrid具有此功能，請參閱樹演示。

如果您想構建自己的，這里有一個示例（ jsFiddle 演示）：使用data-depth屬性構建您的表以指示樹中項目的深度（ levelX CSS 類僅用於樣式縮進）：

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

Answer 2

在現代瀏覽器中，您只需要編寫很少的代碼即可創建可折疊樹：

 var tree = document.querySelectorAll('ul.tree a:not(:last-child)'); for(var i = 0; i < tree.length; i++){ tree[i].addEventListener('click', function(e) { var parent = e.target.parentElement; var classList = parent.classList; if(classList.contains("open")) { classList.remove('open'); var opensubs = parent.querySelectorAll(':scope .open'); for(var i = 0; i < opensubs.length; i++){ opensubs[i].classList.remove('open'); } } else { classList.add('open'); } e.preventDefault(); }); }

 body { font-family: Arial; } ul.tree li { list-style-type: none; position: relative; } ul.tree li ul { display: none; } ul.tree li.open > ul { display: block; } ul.tree li a { color: black; text-decoration: none; } ul.tree li a:before { height: 1em; padding:0 .1em; font-size: .8em; display: block; position: absolute; left: -1.3em; top: .2em; } ul.tree li > a:not(:last-child):before { content: '+'; } ul.tree li.open > a:not(:last-child):before { content: '-'; }

 <ul class="tree"> <li><a href="#">Part 1</a> <ul> <li><a href="#">Item A</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> <li><a href="#">Item B</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> <li><a href="#">Item C</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> <li><a href="#">Item D</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> <li><a href="#">Item E</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> </ul> </li> <li><a href="#">Part 2</a> <ul> <li><a href="#">Item A</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> <li><a href="#">Item B</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> <li><a href="#">Item C</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> <li><a href="#">Item D</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> <li><a href="#">Item E</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> </ul> </li> <li><a href="#">Part 3</a> <ul> <li><a href="#">Item A</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> <li><a href="#">Item B</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> <li><a href="#">Item C</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> <li><a href="#">Item D</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> <li><a href="#">Item E</a> <ul> <li><a href="#">Sub-item 1</a></li> <li><a href="#">Sub-item 2</a></li> <li><a href="#">Sub-item 3</a></li> </ul> </li> </ul> </li> </ul>

（另見這個小提琴）

Answer 3

jquery 是你的朋友。

http://docs.jquery.com/UI/Tree

如果您想自己制作，這里有一些高級指南：

將所有數據顯示為<ul />元素，將內部數據顯示為嵌套的<ul /> ，然后使用 jquery：

$('.ulClass').click(function(){ $(this).children().toggle(); });

我相信這是正確的。 類似的東西。

編輯：

這是一個完整的例子。

 $(".Collapsable").click(function () { $(this).parent().children().toggle(); $(this).toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li><span class="Collapsable">item 1</span><ul> <li><span class="Collapsable">item 1</span></li> <li><span class="Collapsable">item 2</span><ul> <li><span class="Collapsable">item 1</span></li> <li><span class="Collapsable">item 2</span></li> <li><span class="Collapsable">item 3</span></li> <li><span class="Collapsable">item 4</span></li> </ul> </li> <li><span class="Collapsable">item 3</span></li> <li><span class="Collapsable">item 4</span><ul> <li><span class="Collapsable">item 1</span></li> <li><span class="Collapsable">item 2</span></li> <li><span class="Collapsable">item 3</span></li> <li><span class="Collapsable">item 4</span></li> </ul> </li> </ul> </li> <li><span class="Collapsable">item 2</span><ul> <li><span class="Collapsable">item 1</span></li> <li><span class="Collapsable">item 2</span></li> <li><span class="Collapsable">item 3</span></li> <li><span class="Collapsable">item 4</span></li> </ul> </li> <li><span class="Collapsable">item 3</span><ul> <li><span class="Collapsable">item 1</span></li> <li><span class="Collapsable">item 2</span></li> <li><span class="Collapsable">item 3</span></li> <li><span class="Collapsable">item 4</span></li> </ul> </li> <li><span class="Collapsable">item 4</span></li> </ul>

Answer 4

我也會把jsTree扔進戒指。 我發現它非常適合您的特定情況。 它被打包為一個 jQuery 插件。

它可以從各種數據源運行，但我最喜歡的是一個簡單的嵌套列表，如@joe_coolish 或此處所述：

<ul>
  <li>
    Item 1
    <ul>
      <li>Item 1.1</li>
      ...
    </ul>
  </li>
  ...
</ul>

當 JS 在客戶端不可用時，這種結構會優雅地失敗為靜態樹，並且從編碼的角度來看很容易閱讀和理解。

Answer 5

HTML 5 允許摘要標簽、細節元素。 這可用於查看或隱藏（折疊/展開）一個部分。 關聯

Answer 6

您可以嘗試jQuery treegrid ( http://maxazan.github.io/jquery-treegrid/ ) 或jQuery treetable ( http://ludo.cubicphuse.nl/jquery-treetable/ )

兩者都使用 HTML <table>標記格式並將樣式設置為樹。

jQuery 樹表使用data-tt-id和data-tt-parent-id來確定樹的父級和子級。 用法示例：

<table id="tree">
  <tr data-tt-id="1">
    <td>Parent</td>
  </tr>
  <tr data-tt-id="2" data-tt-parent-id="1">
    <td>Child</td>
  </tr>
</table>
$("#tree").treetable({ expandable: true });

同時， jQuery treegrid只使用類來設置樹的樣式。 用法示例：

<table class="tree">
    <tr class="treegrid-1">
        <td>Root node</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-2 treegrid-parent-1">
        <td>Node 1-1</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-3 treegrid-parent-1">
        <td>Node 1-2</td><td>Additional info</td>
    </tr>
    <tr class="treegrid-4 treegrid-parent-3">
        <td>Node 1-2-1</td><td>Additional info</td>
    </tr>
</table>
<script type="text/javascript">
  $('.tree').treegrid();
</script>