teng-ngx-tree
v1.0.7
Published
## 安装 ```base npm install --save teng-ngx-tree yarn add teng-ngx-tree ```
Downloads
3
Readme
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)}
}