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

Question

我有一个要求，我必须在 JSP 中显示文件夹结构树。我能够将结果集设置为 JSP 并将它们显示在 table 中。我需要有关在节点上单击时展开和折叠树的帮助。这类似于本网站的示例。 http://ludo.cubicphuse.nl/jquery-treetable/ 这是一个使用纯 JS 的遗留应用程序。 jquery 树 table 不允许。但是网站示例中给出的带有 tr 和 td 的 table 结构是我想要实现的。我的 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

如果您想使用 tables:

对于 parent 行，添加唯一的 id。对于 child 行，添加将它们连接到它们的 parent 行的属性，例如 data-parent。 Children应该有"collapsed"和"expanded" CSS styles/classes.
将点击事件侦听器添加到 parent 行。单击该行时，child 行的样式会被修改，以便它们变得可见（或隐藏，以防它们之前可见）。 Child 行由 data-parent 属性获取。

但是，我建议您尝试使用 <div> 来创建列布局，因为它们更加灵活，并且允许您使用显式创建 tree-like DOM 结构child仁。使用 JSP 也可能更容易。

无论如何，这是一个使用 table 的工作 JS/CSS/HTML 示例。（第 3 级项目没有样式，因为它变得有点棘手）

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>

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

expand and collapse TR tags on click - folder tree structure

javascript

treeview

tree

jsp