ng2-tree
用法
1.npm install --save ng2-tree
- 在应用的
module里导入TreeModule
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { TreeModule } from 'ng2-tree';
@NgModule({
declarations: [MyComponent],
imports: [BrowserModule, TreeModule],
bootstrap: [MyComponent]
})
export class MyModule {
}
- 然后，我们需要在使用时引入
TreeModel,[tree]属性绑定了这个树形控件所需要的所有数据和一些设置：
// 1 -导入需要的类和接口
import { TreeModel } from 'ng2-tree';
@Component({
selector: 'myComp',
// 2 - 为tree属性设置对象
template: `<tree [tree]="tree"></tree>`
})
class MyComponent {
// 3 - 确保tree对象是treeModel的实例
public tree: TreeModel = {
value: 'Programming languages by programming paradigm',
children: [
{
value: 'Object-oriented programming',
children: [
{value: 'Java'},
{value: 'C++'},
{value: 'C#'}
]
},
{
value: 'Prototype-based programming',
children: [
{value: 'JavaScript'},
{value: 'CoffeeScript'},
{value: 'Lua'}
]
}
]
};
}
- 此外，你还需要引入
style让tree可以使用，在angular-cli.json
文件里引入"../node_modules/ng2-tree/styles.css" - 最后，tree拥有诸多监听事件，以满足需求，例如节点选择事件：
// 1 -导入相关类和接口
import { TreeModel, NodeEvent } from 'ng2-tree';
@Component({
selector: 'myComp',
// 2 - 监听事件并处理
template: `<tree [tree]="tree" (nodeSelected)="logEvent($event)"></tree>`
})
class MyComponent {
public tree: TreeModel = { ... };
// 3 - print caught event to the console
public logEvent(e: NodeEvent): void {
console.log(e);
}
}
API
tree所有的API如下
<tree
[tree]="tree"
[settings]="settings"
(nodeRemoved)="handleRemoved($event)"
(nodeRenamed)="handleRenamed($event)"
(nodeSelected)="handleSelected($event)"
(nodeMoved)="handleMoved($event)"
(nodeCreated)="handleCreated($event)"
(nodeExpanded)="handleExpanded($event)"
(nodeCollapsed)="handleCollapsed($event)">
</tree>
tree
[tree]
- 引入接口
import { TreeModel } from 'ng2-tree';,[tree]属性 - 接口定义：
interface TreeModel {
value: string | RenamableNode;
id: string | number;
children?: Array<TreeModel>;
loadChildren?: ChildrenLoadingFunction;
settings?: TreeModelSettings;
}
参照上面的用法可以快速构造出 tree所需要的数据和一些设置
数据：点击查看详细
设置：treeModel里还一个可以可选的配置属性
{
value: 'Prototype-based programming',
settings: {
'static': true,
'rightMenu': true,
'leftMenu': true,
'cssClasses': {
'expanded': 'fa fa-caret-down fa-lg',
'collapsed': 'fa fa-caret-right fa-lg',
'leaf:': 'fa fa-lg',
'empty': 'fa fa-caret-right disabled'
},
'templates': {
'node': '<i class="fa fa-folder-o fa-lg"></i>',
'leaf': '<i class="fa fa-file-o fa-lg"></i>',
'leftMenu': '<i class="fa fa-navicon fa-lg"></i>'
}
},
children: [
{value: 'JavaScript'},
{value: 'CoffeeScript'},
{value: 'Lua'}
]
}
[setting]
[setting]对象必须是Ng2TreeSettings类型，现在只有一个属性可用 - rootIsVisible，此设置允许您使树的根节点不可见，此属性是可选的
const treeSettings: Ng2TreeSettings = {
rootIsVisible: false
}
events
ng2-tree提供了大量有用的事件供使用
下图简单说明了事件的类型
NodeEvent是tree事件等级的最高级。它定义了节点的事件接收器。
NodeDestructiveEvent是所有对tree做出结构或者属性值更改的所有事件的父类
