Tree Select

Tree select widget.

Note:

  • Data source of tree-select must have keys of titlekey

Examples

Basic Usage

Simplest of usage.

expand codeexpand code
import { Component } from '@angular/core';
import { SFSchema, SFTreeSelectWidgetSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
import { of, delay } from 'rxjs';

@Component({
  selector: 'form-tree-select-simple',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)"></sf> `,
})
export class FormTreeSelectSimpleComponent {
  schema: SFSchema = {
    properties: {
      status1: {
        type: 'string',
        title: '基本',
        enum: [
          { title: '待支付', key: 'WAIT_BUYER_PAY' },
          { title: '已支付', key: 'TRADE_SUCCESS' },
          { title: '交易完成', key: 'TRADE_FINISHED' },
        ],
        default: 'WAIT_BUYER_PAY',
        ui: {
          widget: 'tree-select',
        } as SFTreeSelectWidgetSchema,
      },
      status2: {
        type: 'string',
        title: '多选',
        enum: [
          { title: '待支付', key: 'WAIT_BUYER_PAY' },
          { title: '已支付', key: 'TRADE_SUCCESS' },
          { title: '交易完成', key: 'TRADE_FINISHED' },
        ],
        default: ['WAIT_BUYER_PAY', 'TRADE_SUCCESS'],
        ui: {
          widget: 'tree-select',
          multiple: true,
        } as SFTreeSelectWidgetSchema,
      },
      status3: {
        type: 'string',
        title: '可勾选',
        default: ['WAIT_BUYER_PAY', 'TRADE_FINISHED'],
        ui: {
          widget: 'tree-select',
          checkable: true,
          asyncData: () =>
            of([
              { title: '待支付', key: 'WAIT_BUYER_PAY' },
              { title: '已支付', key: 'TRADE_SUCCESS' },
              { title: '交易完成', key: 'TRADE_FINISHED' },
            ]).pipe(delay(10)),
        } as SFTreeSelectWidgetSchema,
      },
      // 异步数据
      async: {
        type: 'string',
        title: 'Async',
        enum: [
          { title: '待支付', key: 'WAIT_BUYER_PAY' },
          { title: '已支付', key: 'TRADE_SUCCESS' },
          { title: '交易完成', key: 'TRADE_FINISHED' },
        ],
        ui: {
          widget: 'tree-select',
          expandChange: () => {
            return of([
              { title: '待支付', key: 'WAIT_BUYER_PAY' },
              { title: '已支付', key: 'TRADE_SUCCESS' },
              { title: '交易完成', key: 'TRADE_FINISHED' },
            ]).pipe(delay(10));
          },
        } as SFTreeSelectWidgetSchema,
      },
    },
  };

  constructor(private msg: NzMessageService) {}

  submit(value: {}): void {
    this.msg.success(JSON.stringify(value));
  }
}
Customize Icon

You can customize icons for different nodes.

expand codeexpand code
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { SFSchema, SFTreeSelectWidgetSchema } from '@delon/form';
import { NzTreeNode } from 'ng-zorro-antd/tree';

@Component({
  selector: 'form-tree-select-customized-icon',
  template: `
    <sf *ngIf="schema" [schema]="schema"></sf>
    <ng-template #customTpl let-node>
      <span class="ant-tree-node-content-wrapper" [class.ant-tree-node-selected]="node.isSelected">
        <span> <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'"></i> {{ node.title }} </span>
      </span>
    </ng-template>
  `,
})
export class FormTreeSelectCustomizedIconComponent implements OnInit {
  @ViewChild('customTpl', { static: true }) private customTpl!: TemplateRef<{ $implicit: NzTreeNode }>;

  schema?: SFSchema;

  ngOnInit(): void {
    this.schema = {
      properties: {
        status: {
          type: 'string',
          title: '基本',
          enum: [
            {
              title: 'parent 1',
              key: '100',
              expanded: true,
              icon: 'smile',
              children: [
                { title: 'leaf 1-0-0', key: '10010', icon: 'meh', isLeaf: true },
                { title: 'leaf 1-0-1', key: '10011', icon: 'frown', isLeaf: true },
              ],
            },
          ],
          default: '10010',
          ui: {
            widget: 'tree-select',
            treeTemplate: this.customTpl,
          } as SFTreeSelectWidgetSchema,
        },
      },
    };
  }
}
Virtual Scroll

Set virtualHeight to enable virtual scroll.

expand codeexpand code
import { Component } from '@angular/core';
import { SFSchema, SFTreeSelectWidgetSchema } from '@delon/form';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzTreeNodeOptions } from 'ng-zorro-antd/tree';

@Component({
  selector: 'form-tree-select-virtual-scroll',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)"></sf> `,
})
export class FormTreeSelectVirtualScrollComponent {
  schema: SFSchema = {
    properties: {
      status1: {
        type: 'string',
        title: '虚拟滚动',
        enum: this.dig(),
        ui: {
          widget: 'tree-select',
          virtualHeight: '300px',
        } as SFTreeSelectWidgetSchema,
      },
    },
  };

  constructor(private msg: NzMessageService) {}

  private dig(path: string = '0', level: number = 3): NzTreeNodeOptions[] {
    const list: NzTreeNodeOptions[] = [];
    for (let i = 0; i < 10; i += 1) {
      const key = `${path}-${i}`;
      const treeNode: NzTreeNodeOptions = {
        title: key,
        key,
        expanded: true,
        children: [],
        isLeaf: false,
      };

      if (level > 0) {
        treeNode.children = this.dig(key, level - 1);
      } else {
        treeNode.isLeaf = true;
      }

      list.push(treeNode);
    }
    return list;
  }

  submit(value: {}): void {
    this.msg.success(JSON.stringify(value));
  }
}

API

schema

PropertyDescriptionTypeDefault
[enum]Data sourceSFSchemaEnumType[]-
[readOnly]Read onlyboolean-

ui

PropertyDescriptionTypeDefault
[asyncData]Asynchronous data source() => Observable<SFSchemaEnumType[]>-
[size]Size, equals to nzSizestringdefault
[placeholder]Placeholderstring-
[notFoundContent]Text to display when a column is emptystring-
[allowClear]Whether show clear buttonbooleanfalse
[dropdownMatchSelectWidth]Determine whether the dropdown menu and the select input are the same widthbooleantrue
[dropdownStyle]Set the style of the dropdown menuobject-
[dropdownClassName]Set className of the dropdown menustring-
[multiple]Support multiple select(set to true automatically when checkable is set)booleanfalse
[hideUnMatched]Hide unmatched nodesbooleanfalse
[checkable]Whether to show checkbox on the treeNodesbooleanfalse
[checkStrictly]Fully control node itself when it's checkable status(No relationship about check status between parent and child nodes)booleanfalse
[showIcon]Whether to show icon in front of TreeNode title, there is no default stylebooleanfalse
[showExpand]Show a expand icon before the treeNodesbooleantrue
[showLine]Shows a connecting linebooleanfalse
[defaultExpandAll]Whether to expand all treeNodes by defaultbooleanfalse
[displayWith]How to display the selected node value in input box(node: NzTreeNode) => string | undefined(node: NzTreeNode) => node.title
[expandedKeys]Expand specific tree nodes by defaultstring[]-
[maxTagCount]Maximun number of tagnumber-
[maxTagPlaceholder]Placeholder for not showing tagsTemplateRef<{ $implicit: NzTreeNode[] }>-
[treeTemplate]Custom NodesTemplateRef<{ $implicit: NzTreeNode; origin: NzTreeNodeOptions }>-
[expandChange]Callback function for when a treeNode is expanded or collapsed(e: NzFormatEmitEvent) => Observable<SFSchemaEnum[]>-
[virtualHeight]The height of virtual scrollstring-
[virtualItemSize]The size of the items in the list, same as cdk itemSizenumber28
[virtualMaxBufferPx]The number of pixels worth of buffer to render for when rendering new items, same as cdk maxBufferPxnumber500
[virtualMinBufferPx]The minimum amount of buffer rendered beyond the viewport (in pixels),same as cdk minBufferPxnumber28

Asynchronous data must set initial data (Using either enum or asyncData), otherwise, expandChange cannot be triggered.