Question

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

如果要使用表：

对于父行，添加唯一的id。对于子行，添加一个将其连接到其父行的属性，例如data-parent。子项应同时具有“折叠”和“扩展” CSS样式/类。
将点击事件监听器添加到父行。单击该行时，将修改子行的样式，以使其可见（或隐藏，以防以前可见）。子行通过data-parent属性获取。

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

无论如何，这是一个使用表格的有效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标签-文件夹树结构

1 个答案: