该库可用作npm软件包，因此您只需运行以下命令即可：（如果不是新手，建议先装淘宝镜像端，因为cnpm更快）
npm install --save ng2-first-tree
该命令将在您的package.json文件中创建一个记录，并将该包安装到npm modules文件夹中。
首先需要将ng2-first-tree指令导入到组件中。
import { Ng2FirstTreeModule } from 'ng2-first-tree';
然后通过添加到您的模块的指令列表来注册它：
// ...
@NgModule({
imports: [
// ...
Ng2FirstTreeModule,
// ...
],
declarations: [ ... ]
})
// ...
现在，我们需要配置数据并将其添加到模板中。 组件开始工作的唯一必需设置是数据配置，我们在组件中注册设置数据属性。
data = [
{
id: 1,
text: "学校",
nodeDeep: 1,
IsShow: true,
co: true,
children: [
{
id: 2,
text: "计算机系",
nodeDeep: 2,
IsShow: true,
co:true,
children: [
{
id: 6,
text: "一班",
nodeDeep: 3,
IsShow: true,
}
]
},{
id: 4,
text: "经济系",
nodeDeep: 2,
co:true,
IsShow: true,
}
]
},{
id: 3,
text: "医院",
nodeDeep: 1,
IsShow: true,
co: false,
children: [
{
id: 5,
text: "计算机系",
nodeDeep: 2,
IsShow: true,
}
]
}
];
我们还需要配置一些其他的属性，如右键菜单展示的结构，单击时触发的事件，展示隐藏时候的图标class名
settings = {
display: {
displayLength: 10, // 节点文本显示长度
displayName: "text", // 节点显示字段
displayNode: 5, // 显示多少个节点
nodeHeight: 30, // 每个节点高度
nodeWidth: 100, // 每个节点宽度
yScroll: "auto", // 垂直滚动条显示样式
xScroll: "auto", // 横向滚动条显示样式
treeClass: "tree-container", // 树样式
},
menu: [{
text:"添加兄弟节点",
title:"add",
nodeDeeps:[1] // 菜单显示层级，全显示无需设置
},{
text:"添加子节点",
title:"add"
},{
text:"删除",
title:"delete"
},{
text:"修改",
title:"delete",
nodeDeeps:[1]
},],
enableclick:[1,3], // 可点击层级
treeHeight:0, // 树高
filter: { // 搜索配置 暂时没有
type: '', // 客户端过滤|服务端过滤 serverfilter|clientfilter
class: '', // 搜索框的 类名
isShow: false, // 搜索框是否
},
foldedExpansionIsShow: false, // 折叠展开是否显示
drag: {
isDrag: false, // 是否可拖动
dragTreeHeight: [] // 可拖动的节点层级
}
showicon: `icon ion-filing`, // 子节点展开时的图标，
hideicon: `icon ion-folder`, // 子节点隐藏时的图标，
noChildicon: `icon ion-document-text`, // 没有子节点时的图标，
selectBgc: { // 选中行背景色 此项不填写，默认为open: false
open: true, // 是否开启
bgc:'#00abff', // 配置背景色
lv1: false, // 第一级是否开启选中背景色
},
}
最后，我们将ng2-first-tree组件放在模板中：
// ...
@Component({
template: `
<ng2-first-tree [data]="data" [settings]="settings"></ng2-first-tree>
`
})
// ...
现在你有一些数据在树中。
- 可以关注我们的：Github
- 创建拉请求，提交错误，建议新功能
- 本地数据源（Server / API DataSource正在进行中）
ok