原生無限級目錄樹

當(dāng)涉及到原生的無限級目錄樹，我們可以使用遞歸算法來實(shí)現(xiàn)。以下是一個(gè)使用 JavaScript 實(shí)現(xiàn)原生無限級目錄樹的示例

介紹

原生無限級目錄樹是一種常見的數(shù)據(jù)結(jié)構(gòu)，用于組織多層級的目錄或分類數(shù)據(jù)。通過遞歸算法，我們可以動(dòng)態(tài)地構(gòu)建和展示這樣的目錄樹結(jié)構(gòu)。

示例代碼

// 目錄樹數(shù)據(jù)
var data = [{id: 1,name: '目錄1',children: [{id: 2,name: '目錄1.1',children: [{id: 3,name: '目錄1.1.1',children: []},{id: 4,name: '目錄1.1.2',children: []}]},{id: 5,name: '目錄1.2',children: []}]},{id: 6,name: '目錄2',children: []}
];// 渲染目錄樹
function renderTree(data, container) {// 創(chuàng)建無序列表元素var ul = document.createElement('ul');// 遍歷目錄樹數(shù)據(jù)for (var i = 0; i < data.length; i++) {var item = data[i];// 創(chuàng)建列表項(xiàng)元素var li = document.createElement('li');// 創(chuàng)建文本節(jié)點(diǎn)var textNode = document.createTextNode(item.name);// 將文本節(jié)點(diǎn)添加到列表項(xiàng)li.appendChild(textNode);// 如果當(dāng)前目錄項(xiàng)有子目錄，則遞歸渲染子目錄if (item.children && item.children.length > 0) {renderTree(item.children, li);}// 將列表項(xiàng)添加到無序列表ul.appendChild(li);}// 將無序列表添加到容器container.appendChild(ul);
}// 獲取容器元素
var container = document.getElementById('tree-container');// 渲染目錄樹
renderTree(data, container);

代碼解釋

1. 定義了一個(gè)示例的目錄樹數(shù)據(jù) data，每個(gè)目錄項(xiàng)包含 id、name 和 children 屬性。
2. 創(chuàng)建 renderTree() 函數(shù)，用于渲染目錄樹。
3. 在 renderTree() 函數(shù)中，首先創(chuàng)建一個(gè)無序列表元素 ul。
4. 使用 for 循環(huán)遍歷目錄樹數(shù)據(jù)中的每個(gè)目錄項(xiàng)。
5. 創(chuàng)建列表項(xiàng)元素 li，并創(chuàng)建文本節(jié)點(diǎn) textNode，將目錄項(xiàng)的名稱添加到列表項(xiàng)中。
6. 如果當(dāng)前目錄項(xiàng)有子目錄（即 children 屬性不為空），則遞歸調(diào)用 renderTree() 函數(shù)，將子目錄數(shù)據(jù)和當(dāng)前列表項(xiàng)作為參數(shù)進(jìn)行渲染。
7. 將列表項(xiàng) li 添加到無序列表 ul 中。
8. 最后，將無序列表 ul 添加到指定的容器元素中。

這樣，通過遞歸調(diào)用 renderTree() 函數(shù)，我們可以將目錄樹數(shù)據(jù)動(dòng)態(tài)地渲染為無限級的目錄樹結(jié)構(gòu)。