antd-tree

还有一个tree-select组件。

基本使用

/**
  1.nzData：绑定数据
  2.nzTreeComponent：获取dom节点，可以使用tree的一些方法
  3.nzCheckable：是否带有checkbox，默认false。
  4.nzShowExpand:是否有折叠按钮，默认true
  5.nzBlockNode:节点是否是block(选中的默认颜色占满)，默认false
  5.nzShowLine:是否显示连接线，默认false
  6.nzExpandedIcon：自定义icon
    nzShowIcon ==>有点问题
  7.nzTreeTemplate：自定义node节点（icon+title）
  8.[nzExpandAll]:是否展开所有节点，默认false
*/

<nz-tree
  #nzTreeComponent
  [nzData]="nodes"
  [nzBlockNode]="false"
  nzShowIcon
  [nzExpandedIcon]="iconTmp"
  [nzExpandAll]="true"

>
</nz-tree>

// tree的实例，可以执行一些方法
 @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent: NzTreeComponent;

选中的各种方法

/**
  1.nzSelectedKeys:选中item有背景颜色
  2.nzCheckedKeys:选中的checkbox(如果父级选中，那么子级肯定全部选中，那么list中不包含子级的)
  3.nzExpandedKeys：展开的节点key
*/
<nz-tree
  #nzTreeComponent
  [nzData]="nodes"
  [nzCheckable]="true"
  [nzBlockNode]="false"
  [nzSelectedKeys]="selectKeys"
  [nzCheckedKeys]="checkedKeys"
  [nzExpandedKeys]="expandedKeys"
>

方法：

this.nzTreeComponent.getTreeNodeByKey('10011')// 按 key 获取 NzTreeNode 节点（NzTreeNode），在设置选中的item时候，需要用的。

this.nzTreeComponent.getTreeNodes(); // 获取所有的根节点；是一个array。

this.nzTreeComponent.getCheckedNodeList()// 获取选中的节点

this.nzTreeComponent.getSelectedNodeList() // 获取背景选中的节点

this.nzTreeComponent.getExpandedNodeList() // 获取展开的节点

注：方法在ngAfterViewInit后使用。

支持模糊搜索和checkbox

/**
1.nzSearchValue：绑定模糊搜索的字段值（input）
2.nzHideUnMatched：隐藏搜索未匹配的节点
3.nzCheckable：可选择
*/
<nz-input-group [nzSuffix]="suffixIcon">
  <input type="text" nz-input placeholder="Search" [(ngModel)]="searchValue" />
</nz-input-group>
<ng-template #suffixIcon>
  <i nz-icon nzType="search"></i>
</ng-template>
<nz-tree
  [nzData]="searchNodes"
  [nzSearchValue]="searchValue"
  [nzHideUnMatched]="true"
  [nzCheckable]="true"
>
</nz-tree>


// js：
public searchValue = ''; // 模糊搜索的内容
// 树结构
public searchNodes= [
 // ...
];

监听事件

/**
$event:
event.eventName:click、expand、check。
event.node:getChildren()、addChildren(value)
*/
<nz-tree [nzData]="eventNodes" nzAsyncData
         [nzCheckable]="true"
         (nzClick)="nzEventHandle($event)"
         (nzExpandChange)="nzEventHandle($event)"
         (nzCheckBoxChange)="nzEventHandle($event)"
>
</nz-tree>


eventNodes = [
  { title: 'Expand to load', key: '0' },
  { title: 'Expand to load', key: '1' },
  { title: 'Tree Node', key: '2', isLeaf: true }
];

nzEventHandle(event): void {
  console.log(event);
  // load child async
  if (event.eventName === 'expand') {
    const node = event.node;
    console.log('展开节点：',node.isExpanded);
    if (node && node.getChildren().length === 0 && node.isExpanded) {
      this.loadNode().then(data => {
        node.addChildren(data);
      });
    }
  }
}

loadNode(): Promise<NzTreeNodeOptions[]> {
  return new Promise(resolve => {
    setTimeout(
      () =>
        resolve([
          { title: 'Child Node', key: `${new Date().getTime()}-0` },
          { title: 'Child Node', key: `${new Date().getTime()}-1` }
        ]),
      1000
    );
  });
}

自定义模板

需求：在item上hover的时候，有add、edit和delete的icon。

<nz-tree
  #nzTreeComponent
  [nzData]="nodes"
  [nzExpandAll]="true"
  (nzClick)="activeNode($event)"
  (nzDblClick)="openFolder($event)"
  [nzTreeTemplate]="nzTreeTemplate"
></nz-tree>
>
<ng-template #nzTreeTemplate let-node>
<span class="custom-node" [class.active]="activedNode?.key === node.key"
      (mouseover)="showIcon(node)"
      (mouseleave)="hideIcon(node)">
  <span *ngIf="!node.isLeaf">
    <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'"
       (click)="openFolder(node)">

    </i>
    <span class="folder-name">{{ node.title }}</span>

    <!--编辑和查看-->
    <i *ngIf="node.origin.showIcon" class="item-icon"
       nz-icon nzType="edit" nzTheme="outline"
       (click)="edit(node);">

    </i>
    <i *ngIf="node.origin.showIcon" class="item-icon"
       nz-icon nzType="eye" nzTheme="outline"
       (click)="check(node)">

    </i>
  </span>
  
  <span *ngIf="node.isLeaf">
    <i nz-icon nzType="file"></i>
    <span class="file-name">{{ node.title }}</span>

    <!--编辑和查看-->
      <i *ngIf="node.origin.showIcon" class="item-icon"
         nz-icon nzType="edit" nzTheme="outline"
         (click)="edit(node);">

      </i>
    <i *ngIf="node.origin.showIcon" class="item-icon"
       nz-icon nzType="eye" nzTheme="outline"
       (click)="check(node)">

    </i>
  </span>
</span>
</ng-template>

// 显示编辑、新增、删除的icon
showIcon(data) {
  console.log('hover-item:', data);
  data.origin.showIcon = true;
}
// 隐藏icon
hideIcon(data) {
  data.origin.showIcon = false;
}

1.增加了mouseover和mouseleave的事件，给item增加了一个flag，来控制icon的显示和隐藏。
2.叶子和非叶子节点的不同处理。