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);
}
}
the nzNodes
is array of the tree, and each node may contain the following fileds:
id
unique idname
default displayed filed, you can settingdisplayField
ofoptions
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 settinggetChildren
ofoptions
property
Name | 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:
- Use GitHub Issues board to report bugs and feature requests (not our email address)
- Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.
Thanks for understanding!
The MIT License (see the LICENSE file for the full text)