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;
|
return roots;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderTree(nodes, textId) {
|
function renderTree(nodes, textId, depth = 0) {
|
||||||
const ul = document.createElement('ul');
|
const ul = document.createElement('ul');
|
||||||
nodes.forEach(node => {
|
nodes.forEach(node => {
|
||||||
const li = document.createElement('li');
|
const li = document.createElement('li');
|
||||||
|
|
@ -61,11 +61,28 @@ function renderTree(nodes, textId) {
|
||||||
const bulkBtn = document.createElement('button');
|
const bulkBtn = document.createElement('button');
|
||||||
bulkBtn.textContent = 'Bulk add children';
|
bulkBtn.textContent = 'Bulk add children';
|
||||||
bulkBtn.className = '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);
|
li.appendChild(bulkBtn);
|
||||||
|
|
||||||
if (node.children.length > 0) {
|
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);
|
ul.appendChild(li);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue