我正在使用樹視圖來顯示我的分層資料。
我有以下物件陣列:
const data = [
{ id: 1, hierarchyid: "/", level: 0, name: "Mhz" },
{ id: 2, hierarchyid: "/2/", level: 1, name: "SMT" },
{ id: 3, hierarchyid: "/3/", level: 1, name: "QC" },
{ id: 4, hierarchyid: "/3/4/", level: 2, name: "Tester" },
{ id: 5, hierarchyid: "/3/5/", level: 2, name: "Operator" },
];
我需要用這些資料填充我的樹視圖。到目前為止我做了什么:
getTreeItems(node, nodes) {
const filtered = nodes.filter(
(n) => n.hierarchyid.includes(node.hierarchyid) && n.level != node.level
);
return (
<TreeItem
key={node.id}
nodeId={node.hierarchyid}
label={node.name}
onClick={() => onClicked(node)}
>
{filtered.length > 0
? filtered.map((node) => this.getTreeItems(node, filtered))
: null}
</TreeItem>
);
}
和渲染:
render() {
// The data comes from Server
const data = [
{ id: 1, hierarchyid: "/", level: 0, name: "Mhz" },
{ id: 2, hierarchyid: "/2/", level: 1, name: "SMT" },
{ id: 3, hierarchyid: "/3/", level: 1, name: "QC" },
{ id: 4, hierarchyid: "/3/4/", level: 2, name: "Tester" },
{ id: 5, hierarchyid: "/3/5/", level: 2, name: "Operator" },
];
return (
<TreeView
aria-label="file system navigator"
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
sx={{ height: "auto", flexGrow: 1, width: "auto", overflowY: "auto" }}
>
{this.getTreeItems(
{ id: 1, hierarchyid: "/", level: 0, name: "Mhz" },
data
)}
</TreeView>
);
}
}
這給了我這樣的看法:
Mhz
SMT
QC
Tester
Operator
Tester // they shouldn't be displayed
Operator // they have already rendered as child under QC
我的問題是不能排除已經渲染的節點。
更新
MUI TreeView 支持JSON
其節點的特殊資料。所以轉換array
為JSON
也解決了這個問題。像這樣的東西:
const data = {
id: 1,
hierarchyid: "/",
level: 0,
name: "Mhz",
children: [
{
id: 2,
hierarchyid: "/2/",
level: 1,
name: "SMT"
},
{
id: 3,
hierarchyid: "/3/",
level: 1,
name: "QC",
children: [
{
id: 4,
hierarchyid: "/3/4/",
level: 2,
name: "Tester"
},
{
id: 5,
hierarchyid: "/3/5/",
level: 2,
name: "Operator"
}
]
}
]
};
物件陣列來自服務器,那么如何從陣列資料中生成這個 Json?
uj5u.com熱心網友回復:
如果我們撰寫一個快速函式來測驗一個層次結構 id 是否是另一個層次結構的直接后代,那么我們可以使用它來撰寫一個簡單的遞回版本:
const isChild = (prefix) => ({hierarchyid}) =>
hierarchyid .startsWith (prefix)
&& /^[^\/]*\/$/ .test (hierarchyid .slice (prefix .length))
const nest = (xs, prefix = '') =>
xs .filter (isChild (prefix)) .map ((x, _, __, children = nest (xs, x .hierarchyid)) => ({
...x,
... (children .length ? {children} : {})
}))
const data = [{id: 1, hierarchyid: "/", level: 0, name: "Mhz"}, {id: 2, hierarchyid: "/2/", level: 1, name: "SMT"}, {id: 3, hierarchyid: "/3/", level: 1, name: "QC"}, {id: 4, hierarchyid: "/3/4/", level: 2, name: "Tester"}, {id: 5, hierarchyid: "/3/5/", level: 2, name: "Operator"}]
console .log (nest (data))
.as-console-wrapper {max-height: 100% !important; top: 0}
isChild
檢查層次結構 id 是否以我們的前綴開頭,如果其余部分只有一個'/'
, 在最后。
nest
沒有它可能的效率,因為它為每個節點掃描整個陣列。但在我有成千上萬的條目之前,我不會擔心它。
如果您不介意children
葉子上有一些空陣列,它仍然更簡單:
const nest = (xs, prefix = '') =>
xs .filter (isChild (prefix)) .map ((x) => ({
...x,
children: nest (xs, x .hierarchyid)
}))
uj5u.com熱心網友回復:
所以我查看了檔案,他們清楚地提到了一種設計資料物件的方法,以便可以在不重復多個節點的情況下顯示層次結構。
嘗試一次并根據檔案更改渲染功能,您可能會得到您想要的結果。
const data: RenderTree = {
id: "root",
name: "Mhz",
children: [
{
id: "1",
name: "SMT"
},
{
id: "3",
name: "QZ",
children: [
{
id: "4",
name: "Tester"
},
{
id: "4",
name: "Operator"
}
]
}
]
};
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/470939.html
標籤:javascript 数组 反应 递归 树视图