时间戳

首页 > 解决方案 > 在数据表中呈现嵌套行的最佳方法是什么？

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

问题描述

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

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

这是数据的样子：

[ {
    "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,
  }
  ]

标签： javascripthtmlcss

解决方案

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

但首先，我建议你根本不要使用表格。

<li>在语义上更正确。在这里https://onaircode.com/html-css-tree-view-examples/你可以找到很多代码笔的例子。

但是如果你真的想使用<table>，你肯定不需要嵌套行。这在代码和 HTML 中都将是一团糟。

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

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>

如果您不喜欢&nbsp;，您可以添加<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>

在这里您必须选择额外列的宽度。宽度不会随内容而变化（见最后一行）。但我不认为未经用户同意改变列的宽度是一个好主意。如果您认为是这样，您可以为文件名的 -tree、文件类型和文件大小创建单独的列，并在Flexbox或Grid Layout的<li>帮助下将它们彼此相邻放置。float

推荐阅读