A antd style of based on angular-tree-component.
0.7.0
版本,已经内置 nz-tree
组件;0.6.x
之前的依然可用。A antd style of based on angular-tree-component.
angular-tree-component
^7.0.1
Install ng-tree-antd
from npm
npm install ng-tree-antd --save
Import the NzTreeModule
in to your root AppModule
.
import { NzTreeModule } from 'ng-tree-antd';
import { NgZorroAntdModule } from 'ng-zorro-antd';
@NgModule({
imports: [BrowserModule, NzTreeModule, NgZorroAntdModule.forRoot()],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { generateData } from './generate-data';
@Component({
selector: 'demo',
template: `
<nz-tree [nzNodes]="nodes"
[nzOptions]="options"
(nzEvent)="onEvent($event)"></nz-tree>
`
})
export class DemoDraggableComponent {
nodes = [
{
name: 'root1'
},
{
name: 'root2'
},
{
name: 'root3'
},
{
name: 'async root4',
hasChildren: true
}
];
options = {
allowDrag: true
};
onEvent(ev: any) {
console.log('onEvent', ev);
}
}
nzNodes
DATAthe nzNodes
is array of the tree, and each node may contain the following fileds:
id
unique idname
default displayed filed, you can setting displayField
of options
propertychecked
specifies whether the checkbox is selecteddisableCheckbox
disable checkboxhalfChecked
achieve a 'check all' effectchildren
an array of the node's children.hasChildren
for async data load, so you need setting getChildren
of options
propertyName | Type | Default | Summary |
---|---|---|---|
nzNodes | any[] |
see inputs | |
nzAutoExpandParent | boolean, number |
false |
是否自动展开父节点,当数字时展开最大节点 |
nzAllowChildLinkage | boolean |
true |
是否开启父节点的checkbox状态的会影响子节点状态 |
nzAllowParentLinkage | boolean |
true |
是否开启子节点的checkbox状态的会影响父节点状态 |
nzCheckable | boolean |
false |
Add a checkbox before the node |
nzShowLine | boolean |
false |
Shows a connecting line |
nzOptions | TreeOptions |
see options | |
nzTitle | TemplateRef |
Custom title | |
nzLoading | TemplateRef |
Custom Loading | |
nzShiftSelectedMulti | boolean |
true |
selected multi when shift key |
nzToggleExpanded | EventEmitter |
see events | |
nzActivate | EventEmitter |
||
nzDeactivate | EventEmitter |
||
nzFocus | EventEmitter |
||
nzBlur | EventEmitter |
||
nzUpdateData | EventEmitter |
||
nzInitialized | EventEmitter |
||
nzMoveNode | EventEmitter |
||
nzCopyNode | EventEmitter |
||
nzLoadNodeChildren | EventEmitter |
||
nzChangeFilter | EventEmitter |
||
nzEvent | EventEmitter |
||
nzStateChange | EventEmitter |
||
nzCheck | EventEmitter |
fired checkbox is changed |
Please follow this guidelines when reporting bugs and feature requests:
Thanks for understanding!
The MIT License (see the LICENSE file for the full text)