PrimeNG TreeTable异步加载子树[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

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)” >

< p -header >Singe Selection </ p -header >

< p-column field= “descn” header= “部门名称” [ style]= “{‘width’:’200px’}” ></ 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 -treeTable >

4. 首次请求后台得到第一次树形节点数据

this. unitService. getAllOrganizational()

. subscribe(

( profile: any[]) => {

console. log( profile);

this . _organizationalManagementList = profile . map ( item => {

return {

label: item[ “descn”],

data: item,

expandedIcon: “fa-folder-open”,

collapsedIcon: “fa-folder”,

leaf: false

};

});

});

5. 第二次展开，会触发 onNodeExpand方法，执行中根据$event中的id值进行第二次请求

_expandOrganizational( event){

console. log( event);

if ( event. node) {

this. unitService. getAllOrganizationalById( event. node[ “data”]. id). subscribe(

( res: any[]) => {

const childrenList= res[ “privileges”];

event.node.children = childrenList . map ( item => {

return {

label: item[ “text”],

data: item,

expandedIcon: “fa-folder-open”,

collapsedIcon: “fa-folder”,

leaf: false

};

});

// console.log(event.node);

},

( err: HttpErrorResponse) => {

if ( err. error instanceof Error) {

alert( `客户端错误or网络连接失败, ${ err. error. message } `);

} else {

const errMsg = `服务器返回数据失败，错误代码： ${

err. status

} ，错误信息： ${ err. error } `;

console. log( errMsg);

alert( errMsg);

}

}

);

}

}

6. 再展开之前还需要判断是否已经是最后一层，如果是的话是文件形式的图标，如果不是的话是文件夹形式，后续会再更新

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/141863.html原文链接：https://javaforall.cn