我有一个要求,我必须在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
答案 0 :(得分: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>