ng-tree-antd
ng-tree-antd copied to clipboard
A antd style of based on angular-tree-component.
项目不会再发布兼容 ng-zorro-antd 0.7.0 版本,已经内置 nz-tree 组件;0.6.x 之前的依然可用。
ng-tree-antd
A antd style of based on angular-tree-component.
Demo
Dependencies
angular-tree-component^7.0.1
Usage & Installation
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 { }
Usage
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 DATA
the nzNodes is array of the tree, and each node may contain the following fileds:
idunique idnamedefault displayed filed, you can settingdisplayFieldofoptionspropertycheckedspecifies whether the checkbox is selecteddisableCheckboxdisable checkboxhalfCheckedachieve a 'check all' effectchildrenan array of the node's children.hasChildrenfor async data load, so you need settinggetChildrenofoptionsproperty
API
| 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 |
Troubleshooting
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!
License
The MIT License (see the LICENSE file for the full text)