Angular整合zTree的示例代码

1 前提准备

1.1 新建一个angular4项目

参考博文：

1.2 去zTree官网下载zTree

zTree官网：

2 编程步骤

从打印出zTree对象可以看出，zTree对象利用init 方法来实现zTree结构；init方法接收三个参数

参数1：一个ul标签的DOM节点对象

参数2：基本配置对象

参数3：标题信息数组

2.1 在index.html中引入相关js、css

403_35@ <Meta charset="utf-8"> TestZtree

2.2 在TS文件中声明jquery对象

2.3 在TS文件中编写代码

@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

// setting = {
// view: {
// showLine: true,// showIcon: true,// fontCss: this.getFont
// },// data: {
// simpleData: {
// enable: true,// idKey: 'id',// pIdKey: 'pId'
// }
// },// callback: {
// onClick: this.onCzTreeOnClick
// }
// };

// zNodes = [
// {id: 1,pId: 0,name: '1 一级标题',open: true,iconOpen:"assets/zTree/css/zTreeStyle/img/diy/1_open.png",iconClose:"assets/zTree/css/zTreeStyle/img/diy/1_close.png"},// {id: 11,pId: 1,name: '1.1 二级标题',font:{'background-color':'skyblue','color':'white'}},// {id: 111,pId: 11,name: '1.1.1 三级标题 -> 博客园',url: 'http://www.cnblogs.com/NeverCtrl-C/'},// {id: 112,name: '1.1.2 三级标题 -> 单击',click: "alert('你单击了')"},// {id: 12,name: '1.2 二级标题'},// {id: 2,name: '2 一级标题'}
// ]

// getFont(treeId,node) {
// return node.font ? node.font : {};
// }

// onCzTreeOnClick(event,treeId,treeNode,clickFlag) {
// alert(treeNode.name);
// }

setting = {
data: {
simpleData: {
enable: true
}
}
};
zNodes = [
{id: 1,name: '1 一级标题'},{id: 11,name: '1.1 二级标题'},{id: 111,name: '1.1.1 三级标题'},{id: 112,name: '1.1.2 三级标题'},{id: 12,{id: 2,name: '2 一级标题'}
];