javascript - 单击时展开和折叠 TR 标签 - 文件夹树结构

Question

我有一个要求，我必须在 JSP 中显示文件夹结构树。我能够将结果集获取到 JSP 并将其显示在表中。我需要在单击节点时展开和折叠树的帮助。这与本网站中的示例类似。 http://ludo.cubicphuse.nl/jquery-treetable/

这是一个使用纯 JS 的遗留应用程序。不允许使用 JQuery 树表。但是网站示例中给出的带有 tr 和 td 的表结构正是我想要实现的。我的html代码如下。

<table cellspacing="0">
  <ul>
    <li>folder1<li>
    <ul>
      <li>SF1</li>
      <li>SF2</li>
      <ul>
        <li>SF1 SF1</li>
      </ul>
    </ul>
    <li>folder2<li>
    <ul>
      <li>SFF1</li>
      <li>SFF2</li>
      <li><SFF3</li>
    </ul>
  </ul>
</table>

我想将 ul li 替换为 tr, td 并使它们展开和折叠。 原因是 UI 显示将包含包含文件夹名称、文件数量、文件大小和创建者的列。我无法通过 ul、li 实现此目的，因此需要寻找 tr、td。

Answer 1

如果您想使用表格:

1. 对于父行，添加唯一的 id 。对于子行，添加将它们连接到其父行的属性，例如 data-parent 。 children 应该同时拥有“折叠”和“展开”的 CSS 样式/类。
2. 向父行添加点击事件监听器。单击该行时，子行的样式将被修改，以便它们变得可见(或隐藏，以防它们之前可见)。子行由 data-parent 获取属性。

但是，我建议您尝试使用 <div> 创建列布局相反，它们更加灵活，允许您创建具有显式子项的树状 DOM 结构。使用 JSP 也可能更容易。

无论如何，这是一个使用表格的有效 JS/CSS/HTML 示例。 (第三级项目没有样式，因为它变得有点棘手)

function toggleRow(event) {
  var rowId = event.currentTarget.id;
  var children = document.querySelectorAll("[data-parent=" + rowId + "]")
  children.forEach(function(row) {
    if (row.classList.contains("expanded")) {
      row.classList.remove("expanded");
    } else {
      row.classList.add("expanded");
    }
  });
}

var rows = document.querySelectorAll(".parent-row")
rows.forEach(function(row) {
  row.addEventListener("click", toggleRow);
});

.tree-table .parent-row:hover {
  cursor: pointer;
}

.tree-table [data-parent] td:first-child {
  padding-left: 10px;
}

.tree-table [data-parent] {
  display: none;
}

.tree-table [data-parent].expanded {
  display: table-row;
}

<table class="tree-table">
  <tbody>
    <tr id="row-1" class="parent-row"><td>folder1</td></tr>
    <tr data-parent="row-1"><td>SF1</td></tr>
    <tr id="row-1-1" class="parent-row" data-parent="row-1"><td>SF2</td></tr>
    <tr data-parent="row-1-1"><td>SF1 SF1</td></tr>
    <tr id="row-2" class="parent-row"><td>folder2</td></tr>
    <tr data-parent="row-2"><td>SFF1</td></tr>
    <tr data-parent="row-2"><td>SFF2</td></tr>
    <tr data-parent="row-2"><td>SFF3</td></tr>
  </tbody>
</table>