我正在尋找一種從平面陣列創建動態樹狀結構的解決方案。
樣本輸入 -> [1, 2, 3, 4, 5, 6, 7]
我能夠確定的是需要的列數和行數。但堅持為每個元素的位置找到一個模式，以便它們可以以適當的間距定位。
** 在迭代期間，我將獲得列和索引資訊
Ex1： Num 4 元素將進入第 3 列和第 2 行。
Ex2：如果輸入位置有 3 個元素，則為->
第一個元素-> 1 無列和 2 無行
第二個元素-> 2 無列和 1 無行
第三個元素-> 2 無列和 3 無行
通過以下方式確定列數和行數->
getColumnLength() {
if (this.list.length <= 1) {
return 1;
}
if (this.list.length <= 3) {
return 2;
}
for (let i = 2; i <= this.list.length; i ) {
let columnLength = Math.pow(2, i);
if (columnLength >= this.list.length) {
return i;
}
}
},
getRowLength() {
return Math.pow(2, this.getColumnLength) 1;
},
任何建議都會非常有幫助。
uj5u.com熱心網友回復：
您還需要涵蓋樹不完美的情況，即當樹的葉子不在同一水平面上時。在這種情況下，計算getRowLength不正確，因為它會計算一些仍然為空的行。行數實際上就是串列的大小：串列中的每個值都顯示在自己的行上，不需要其他行。
還有一種很不錯的Math.clz32方法，您可以使用它輕松獲取數字中使用的位數。這個位數很好地映射到列數。
您可以在有序遍歷期間獲取單元格的行/列資訊。
這是一個使用生成器進行這種按順序遍歷的演示。該迭代器將產生當前訪問值的位置資訊（row和column）：
const tree = {
* iterate(index=0, column=1, cursor={row: 1}) {
if (index >= this.list.length) return;
yield* this.iterate(index * 2 1, column 1, cursor);
yield { index, value: this.list[index], row: cursor.row , column };
yield* this.iterate(index * 2 2, column 1, cursor);
},
getColumnLength() {
return 32 - Math.clz32(this.list.length);
},
displayInDOM(container) { // Demo that uses above iterate method
container.innerHTML = `<table>${`<tr>${"<td></td>".repeat(this.getColumnLength())}<\/tr>`.repeat(this.list.length)}<\/table>`;
const rows = container.children[0].rows;
for (const {row, column, value} of this.iterate()) {
rows[row - 1].cells[column - 1].textContent = value;
}
}
}
// Demo
tree.list = [1,2,3,4,5,6,7,8,9];
tree.displayInDOM(document.querySelector("div"));table { border-collapse: collapse }
td { vertical-align: middle; text-align: center; min-width: 24px; border: 1px solid; }<div></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/514869.html
上一篇：求N-單調數
下一篇：將遞回轉換為動態