teng-ngx-tree v1.0.7

TENG TREE FOR NGX

安装

npm install --save teng-ngx-tree
yarn add teng-ngx-tree

使用

• 输入：「data」

data = [
    {name: 'Item 1', children: []},
    {
      name: 'Item 2', expanded: true, children: [
        {name: 'Sub Item 1', children: []},
        {name: 'Sub Item 2', children: []},
        {name: 'Sub Item 3', children: []},
        {name: 'Sub Item 4', children: []},
        {name: 'Sub Item 5', children: []},
      ]
    }
  ]

• 事件

onexpand  --> 展开
onexpandAll  --> 展开全部
oncollapse  --> 收缩
oncollapseAll  --> 收缩全部
onselect  --> 选择

示例

// app.module.ts
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TengNgxTreeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
@Component({
  selector: 'app-root',
  template: `<teng-tree 
  (onexpand)="checkExpand($event)"
  (onexpandAll)="checkExpandAll($event)"
  (oncollapse)="checkCollapse($event)"
  (oncollapseAll)="checkCollapseAll($event)"
  (onselect)="checkSelect($event)"
  [data]="data"></teng-tree>`
})
export class AppComponent {
  public data = [
    {name: 'Item 1', children: []},
    {
      name: 'Item 2', expanded: true, children: [
        {name: 'Sub Item 1', children: []},
        {name: 'Sub Item 2', children: []},
        {name: 'Sub Item 3', children: []},
        {name: 'Sub Item 4', children: []},
        {name: 'Sub Item 5', children: []},
      ]
    }
  ];
  
  public Expand(e){console.log(e)}
  public ExpandAll(e){console.log(e)}
  public Collapse(e){console.log(e)}
  public CollapseAll(e){console.log(e)}
  public Select(e){console.log(e)}
}