在数据表中呈现嵌套行的最佳方法是什么？

如何解决在数据表中呈现嵌套行的最佳方法是什么？

我打算为文件浏览器创建树数据表，并想知道如何在文件夹中呈现文件行。数据位于文件路径的平面列表中，但是我可以将其重新格式化为与文件夹的结构相同。

我在辩论是否必须将文件夹的子项呈现为行中的嵌套行，或者是否可以将它们作为同级行并仅修改填充以指示层次结构？

这是数据的样子：

[ {
    "name" : "Parent Folder","path" : "/home/desktop/report","size" : 2156754,"createdOn" : -1,"fileType" : "FOLDER","itemId" : 478202,},{
    "name" : "nested file","path" : "/home/desktop/report/test.js","size" : 15402,"createdOn" : 1595072355000,"fileType" : "FILE","itemId" : 478203,"parentId" : 478202,{
    "name" : "nested folder","path" : "/home/desktop/report/build","size" : 2141352,"itemId" : 478204,"faulty" : false,"newItemCount" : 478498,"itemCount" : 478498
  },"path" : "/home/desktop/report/build/main","parentId" : 478204,}
  ]

解决方法

有很多方法可以归档目标，但是我怀疑是否有最好的方法，它们只是有所不同。而且始终是一个问题：“最好的方式是什么？”

但是首先，我建议您不要使用表。

<li>在语义上更正确。在https://onaircode.com/html-css-tree-view-examples/上，您可以找到许多带有代码笔的示例。

但是，如果您确实要使用<table>，则绝对不需要嵌套行。在代码和HTML中都将一团糟。

没有什么比填充更简单的了。您甚至不需要为此使用一些特殊的HTML标记或CSS-只需将所需数量的 添加到带有文件名的字符串即可。

td { border-right: solid; }
table { border-spacing: 0px }

<table>
  <tr>
    <td>folder1</td><td></td><td>1 file & 1 folder</td>
  </tr>
  <tr>
    <td>&nbsp;&nbsp;folder2</td><td></td><td>1 file</td>
  </tr>
  <tr>
    <td>&nbsp;&nbsp;&nbsp;&nbsp;file1</td><td>pdf</td><td>123Kb</td>
  </tr>
  <tr>
    <td>&nbsp;&nbsp;file2</td><td>txt</td><td>123Kb</td>
  </tr>
</table>

如果您不喜欢 ，则可以添加<span>并添加填充

td { border-right: solid; }
table { border-spacing: 0px }
span { padding: 3px; }

<table>
  <tr>
    <td>folder1</td><td></td><td>1 file & 1 folder</td>
  </tr>
  <tr>
    <td><span></span>folder2</td><td></td><td>1 file</td>
  </tr>
  <tr>
    <td><span></span><span></span>file1</td><td>pdf</td><td>123Kb</td>
  </tr>
  <tr>
    <td><span></span>file2</td><td>txt</td><td>123Kb</td>
  </tr>
</table>

对于<li>，您需要显示更多的列...是的，这可能会有点困难，因此，如果您不为语义或代码编写而努力，则可能应该坚持目前<table>。

但是无论如何，这是一种实现方法：

.tree { width: 90%; }
.file_box { display: flex; flex-direction: row; justify-content: flex-end; }
.filename { margin-right: auto; }
.type { width: 130px; overflow: hidden; border-right: solid; border-left: solid; }
.size { width: 130px; overflow: hidden; }

<ul class="tree">
  <li>
    <div class="file_box"><span class="filename">folder1</span><span class="type"></span><span class="size">1 file & 1 folder</span></div>
    <ul>
      <li>
        <div class="file_box"><span class="filename">folder2</span><span class="type"></span><span class="size">1 file</span></div>
        <ul>
          <li>
            <div class="file_box"><span class="filename">file</span><span class="type">pdf</span><span class="size">123Kb</span></div>
          </li>
        </ul>
      </li>
      <li>
        <div class="file_box"><span class="filename">file</span><span class="type">txtasdfasdfasdfasdfasdfasdf</span><span class="size">123Kb</span></div>
      </li>
    </ul>
  </li>
</ul>

在这里，您必须选择额外列的宽度。宽度不会随内容而改变（请参阅最后一行）。但是我认为未经用户同意更改列宽不是一个好主意。如果您认为是这样，可以为文件名的<li>-树，文件类型和文件大小创建单独的列，并借助 Flexbox 或 Grid Layout ，仅float个。

,

绝对将文件夹的子级呈现为嵌套行，尤其是如果您打算将来对它们执行操作时。

因此，如果您想从表中获取所有父级或获取特定父级的子级，则让我们往下走，这样做会更容易。但是，如果您只是进行填充，那么它并不是真正的最佳解决方案，并且可能导致不一致。

嵌套绝对是专业的方法。而且，如果您正在寻找直接的实现方式，我建议您使用ag-grid，因为它已经具备了您所需的一切。

https://www.ag-grid.com/javascript-grid-tree-data/