大家好，又见面了，我是你们的朋友全栈君。
1. PrimeNG官网：https://www.primefaces.org/primeng/#/treetable
2. 引入TreeTableModule到自己的module.ts中
3. 页面中写上PrimeNG规定的p-treeTable格式，value对应后台返回的treeNode格式，field中对应的是data:item中返回的值 的名称
<
p
-treeTable
[
value
]=
“_organizationalManagementList“
selectionMode
=
“single”
[(
selection
)]=
“selectedFile”
(
onNodeSelect
)=
“_OrganizationalSelectHandler($event)”
(
onNodeExpand
)=
“_expandOrganizational($event)”
>
onNodeSelect
)=
“_OrganizationalSelectHandler($event)”
(
onNodeExpand
)=
“_expandOrganizational($event)”
>
<
p
-header
>Singe Selection
</
p
-header
>
p
-header
>Singe Selection
</
p
-header
>
<
p-column
field=
“descn”
header=
“部门名称” [
style]=
“{‘width’:’200px’}”
></
p-column
>
p-column
field=
“descn”
header=
“部门名称” [
style]=
“{‘width’:’200px’}”
></
p-column
>
<
p-column
field=
“id”
header=
“”
></
p-column
>
p-column
field=
“id”
header=
“”
></
p-column
>
<
p-column
field=
“jobGroupId”
header=
“部门编号”
></
p-column
>
p-column
field=
“jobGroupId”
header=
“部门编号”
></
p-column
>
<
p-column
field=
“jobGroupId”
header=
“部门简称”
></
p-column
>
p-column
field=
“jobGroupId”
header=
“部门简称”
></
p-column
>
<
p-column
field=
“jobGroupId”
header=
“部门性质”
></
p-column
>
p-column
field=
“jobGroupId”
header=
“部门性质”
></
p-column
>
<
p-column
field=
“jobGroupId”
header=
“负责人”
></
p-column
>
p-column
field=
“jobGroupId”
header=
“负责人”
></
p-column
>
<
p-column
field=
“jobGroupId”
header=
“电话号”
></
p-column
>
p-column
field=
“jobGroupId”
header=
“电话号”
></
p-column
>
<
p-column
field=
“jobGroupId”
header=
“分机号”
></
p-column
>
p-column
field=
“jobGroupId”
header=
“分机号”
></
p-column
>
<
p-column
field=
“jobGroupId”
header=
“备注”
></
p-column
>
p-column
field=
“jobGroupId”
header=
“备注”
></
p-column
>
</
p
-treeTable
>
p
-treeTable
>
4. 首次请求后台得到第一次树形节点数据
this.
unitService.
getAllOrganizational()
unitService.
getAllOrganizational()
.
subscribe(
subscribe(
(
profile:
any[])
=> {
profile:
any[])
=> {
console.
log(
profile);
log(
profile);
this
.
_organizationalManagementList
=
profile
.
map
(
item
=>
{
return {
label:
item[
“descn”],
item[
“descn”],
data:
item,
item,
expandedIcon:
“fa-folder-open”,
“fa-folder-open”,
collapsedIcon:
“fa-folder”,
“fa-folder”,
leaf:
false
false
};
});
});
5. 第二次展开，会触发 onNodeExpand方法，执行中根据$event中的id值进行第二次请求
_expandOrganizational(
event){
event){
console.
log(
event);
log(
event);
if (
event.
node) {
event.
node) {
this.
unitService.
getAllOrganizationalById(
event.
node[
“data”].
id).
subscribe(
unitService.
getAllOrganizationalById(
event.
node[
“data”].
id).
subscribe(
(
res:
any[])
=> {
res:
any[])
=> {
const
childrenList=
res[
“privileges”];
childrenList=
res[
“privileges”];
event.node.children
=
childrenList
.
map
(
item
=>
{
return {
label:
item[
“text”],
item[
“text”],
data:
item,
item,
expandedIcon:
“fa-folder-open”,
“fa-folder-open”,
collapsedIcon:
“fa-folder”,
“fa-folder”,
leaf:
false
false
};
});
// console.log(event.node);
},
(
err:
HttpErrorResponse)
=> {
err:
HttpErrorResponse)
=> {
if (
err.
error
instanceof
Error) {
err.
error
instanceof
Error) {
alert(
`客户端错误or网络连接失败,
${
err.
error.
message
}
`);
`客户端错误or网络连接失败,
${
err.
error.
message
}
`);
}
else {
else {
const
errMsg =
`服务器返回数据失败，错误代码：
${
errMsg =
`服务器返回数据失败，错误代码：
${
err.
status
status
}
，错误信息：
${
err.
error
}
`;
，错误信息：
${
err.
error
}
`;
console.
log(
errMsg);
log(
errMsg);
alert(
errMsg);
errMsg);
}
}
);
}
}
6. 再展开之前还需要判断是否已经是最后一层，如果是的话是文件形式的图标，如果不是的话是文件夹形式，后续会再更新
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/141863.html原文链接：https://javaforall.net
