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

全栈程序员-站长 • 2022年5月24日下午9:40 • 未分类 • 阅读 39

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

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);
 
   }
 
   }
 
   );
 
   }
 
   }