jQuery遞歸遍歷顯示樹是一個非常有用的功能,可以幫助我們快速展示一個層級結(jié)構(gòu)的數(shù)據(jù)。
遞歸遍歷樹的代碼很簡單,只需要用到一個函數(shù)和一個循環(huán)。以下是一個示例代碼:
function showTree(data, level) { for (var i = 0; i < data.length; i++) { var node = data[i]; var indent = ""; for (var j = 0; j < level; j++) { indent += "----"; // 縮進(jìn) } console.log(indent + node.text); if (node.children) { showTree(node.children, level + 1); // 遞歸調(diào)用 } } } var data = [{ text: "節(jié)點1" }, { text: "節(jié)點2", children: [{ text: "子節(jié)點1" }, { text: "子節(jié)點2", children: [{ text: "子子節(jié)點1" }, { text: "子子節(jié)點2" }] }] }]; showTree(data, 0);
在上面的代碼中,我們首先定義了一個showTree函數(shù),它接受兩個參數(shù):data和level。data是一個數(shù)組,表示一棵樹的節(jié)點。level表示當(dāng)前節(jié)點的層數(shù)。
我們用一個循環(huán)來遍歷每一個節(jié)點,然后根據(jù)它的層數(shù)來縮進(jìn),最后打印出它的文本內(nèi)容。如果當(dāng)前節(jié)點還有子節(jié)點,我們就遞歸調(diào)用showTree函數(shù),把它的子節(jié)點作為參數(shù)傳遞進(jìn)去。
最后,我們定義了一個data數(shù)組,并把它作為參數(shù)傳遞給showTree函數(shù)。當(dāng)我們運行這段代碼時,它會打印出整棵樹的節(jié)點文本內(nèi)容:
節(jié)點1 節(jié)點2 ----子節(jié)點1 ----子節(jié)點2 --------子子節(jié)點1 --------子子節(jié)點2