add toggle children button to nodes
This commit is contained in:
parent
d26734facf
commit
12fd5a88b6
1 changed files with 20 additions and 3 deletions
|
|
@ -43,7 +43,7 @@ function buildTree(nodes) {
|
|||
return roots;
|
||||
}
|
||||
|
||||
function renderTree(nodes, textId) {
|
||||
function renderTree(nodes, textId, depth = 0) {
|
||||
const ul = document.createElement('ul');
|
||||
nodes.forEach(node => {
|
||||
const li = document.createElement('li');
|
||||
|
|
@ -61,11 +61,28 @@ function renderTree(nodes, textId) {
|
|||
const bulkBtn = document.createElement('button');
|
||||
bulkBtn.textContent = 'Bulk add children';
|
||||
bulkBtn.className = 'bulk-add-children';
|
||||
bulkBtn.addEventListener('click', () => toggleBulkAddForm(li, node.id, textId));
|
||||
bulkBtn.addEventListener(
|
||||
'click',
|
||||
() => toggleBulkAddForm(li, node.id, textId)
|
||||
);
|
||||
li.appendChild(bulkBtn);
|
||||
|
||||
if (node.children.length > 0) {
|
||||
li.appendChild(renderTree(node.children, textId));
|
||||
const childUl = renderTree(node.children, textId, depth + 1);
|
||||
const childrenVisible = depth === 0;
|
||||
childUl.style.display = childrenVisible ? '' : 'none';
|
||||
|
||||
const toggleBtn = document.createElement('button');
|
||||
toggleBtn.className = 'toggle-children';
|
||||
toggleBtn.textContent = childrenVisible ? '▼' : '▶';
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
const isHidden = childUl.style.display === 'none';
|
||||
childUl.style.display = isHidden ? '' : 'none';
|
||||
toggleBtn.textContent = isHidden ? '▼' : '▶';
|
||||
});
|
||||
|
||||
li.appendChild(toggleBtn);
|
||||
li.appendChild(childUl);
|
||||
}
|
||||
|
||||
ul.appendChild(li);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue