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

Question

我打算为文件浏览器创建一个树数据表，并想知道如何为文件夹中的文件呈现行。数据位于文件路径的平面列表中，但我可以将其重新格式化为与文件夹结构相同。
我正在争论是否必须将文件夹的子项呈现为一行内的嵌套行，或者是否可以将它们作为同级行并仅修改填充以指示层次结构？
这是数据的样子:

[ {
    "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,
    "createdOn" : 1595072355000,
    "fileType" : "FOLDER",
    "itemId" : 478204,
    "parentId" : 478202,
    "faulty" : false,
    "newItemCount" : 478498,
    "itemCount" : 478498
  },
  {
    "name" : "nested folder",
    "path" : "/home/desktop/report/build/main",
    "size" : 2141352,
    "createdOn" : 1595072355000,
    "fileType" : "FILE",
    "itemId" : 478204,
    "parentId" : 478204,
  }
  ]

Answer 1

有很多方法可以存档您的目标，但我怀疑是否有 最好的方式，他们只是不同。它总是一个问题:“最好的方式是什么？”
但首先，我建议你根本不要使用表格。<li>在语义上更正确。这里https://onaircode.com/html-css-tree-view-examples/您可以使用 codepen 找到很多示例。
但是如果你真的想用<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>带有填充的 s

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> s 现在。
但无论如何，这是一种方法:

.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> 创建单独的列-tree，用于文件类型和文件大小，并在 Flexbox 或网格布局的帮助下将它们彼此相邻放置，仅 float他们。