Có 2 bước:
- Tạo tree từ bảng Person
- Tạo HTML bằng cách duyệt tree.
Bước tạo tree:
- Tạo root node gồm
name
và mảng children
- Duyệt từng hàng trong table Person
- Tìm kiếm (search)
row.parent
trong tree
- Nếu tìm thấy, insert node đó vào tree
Bước tạo HTML:
- Duyệt theo Preorder traversal
- Chú ý các điều kiện: node có name không? node có subtree không?
JavaScript
function buildTree(rows) {
let root = {
level: 0,
children: []
};
function searchTree(name) {
function _searchTree(node, name) {
if (node.name == name) {
return node;
}
for (let child of node.children) {
let res = _searchTree(child, name);
if (res) return res;
}
}
return _searchTree(root, name);
}
for (let row of rows) {
if (row.level == 1) {
root.children.push({
name: row.name,
level: 1,
children: []
});
continue;
}
let node = searchTree(row.parent);
if (node) {
node.children.push({
name: row.name,
level: node.level + 1,
children: []
});
}
}
return root;
}
function renderHTML(node) {
function renderChildren() {
return node.children
.map(child => renderHTML(child))
.join('');
}
if (node.name) {
if (node.children.length > 0) {
return `<li>${node.name}<ul>${renderChildren()}</ul></li>`;
}
return `<li>${node.name}</li>`;
} else {
if (node.children.length > 0) {
return `<ul>${renderChildren()}</ul>`;
}
return '';
}
}
let html = renderHTML(
buildTree([
{ name: 'A', level: 1 },
{ name: 'B', level: 1 },
{ name: 'A1', parent: 'A', level: 2 },
{ name: 'A11', parent: 'A1', level: 3 },
{ name: 'A12', parent: 'A1', level: 3 },
{ name: 'A121', parent: 'A12', level: 4 }
])
);
console.log(html);
Note: Java dài + khai báo custom class nữa => chuyển sang JavaScript cho đỡ.