我需要創建一個面包屑配置串列，具體取決于用戶在串列中單擊了哪個專案。
這些專案被列為一種可擴展的表格，用戶可以在其中單擊名稱，然后將其與其子項一起展開，然后如果用戶單擊更深的專案，則會發生同樣的事情，等等。
然后，例如，如果用戶單擊子級別 3-1面包屑，它應該如下所示：
根級別 > 子級別 1-1 > 子級別 2-1 > 子級別 3-1
或者如果用戶點擊sub level 1-3，它應該是：
根級別 > 子級別 1-3
我得到的是被點擊專案的 ID 和根級物件。
我需要找到該專案在哪個位置，然后從它的索引回圈到“根級別”，在途中收集名稱和 ID，創建一個 breadCrumbArry；像這樣的東西：
[
{
id:"1-1"
name: "sub level 1-1"
},
{
id:"2-1"
name: "sub level 2-1"
},
{
id:"3-1"
name: "sub level 3-1"
}
]
我嘗試了許多不同的方法，例如將其展平并回圈通過它，在途中收集資料，但無法提出可行的解決方案。現在我的大腦已經停止運作.. :) 一點幫助將不勝感激。
嵌套陣列看起來像這樣并且可以有任意深度：
{
Id: 1,
Name:"Root level",
Children: [
{
Id: 1,
Name:"sub level 1-1",
Children: [
{
Id: 1,
Name:"sub level 2-1",
Children: [
{
Id: 1,
Name:"sub level 3-1",
Children: []
},
]
},
]
},
{
Id: 2,
Name:"sub level 1-2",
Children: []
},
{
Id: 3,
Name:"sub level 1-3",
Children: []
},
]
}
uj5u.com熱心網友回復：
我不太明白這些id屬性是如何在輸出中派生的，但它看起來像是深度（樹中的級別）和節點自己的 id 值的串聯。
您將在整個選單中執行深度優先遍歷。我假設目標元素的名稱通常沒有任何線索可以告訴您有關其在選單中的位置的任何資訊。所以可能需要一個完整的遍歷。然后，當您遇到問題時，開始從遞回中回溯，在此程序中構建面包屑。
function pathTo(menu, name, depth=1) {
if (menu.Name === name) return [];
for (let submenu of menu.Children) {
let result = pathTo(submenu, name, depth 1);
if (result) {
return [{
id: `${depth}-${submenu.Id}`,
name: submenu.Name
},
...result];
}
}
}
let menu = {Id: 1,Name:"Root level",Children: [{Id: 1,Name:"sub level 1-1",Children: [{Id: 1,Name:"sub level 2-1",Children: [{Id: 1,Name:"sub level 3-1",Children: []},]},]},{Id: 2,Name:"sub level 1-2",Children: []},{Id: 3,Name:"sub level 1-3",Children: []},]};
let result = pathTo(menu, "sub level 3-1");
console.log(result);轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/405979.html
標籤：