ztree使用入门

最近在项目中使用到了ztree这个树形插件，现在简单总结下，就使用到的功能做个总结。

1、ztree的简单介绍

ztree的官网地址：http://www.treejs.cn/v3/main.php#_zTreeInfo；

看下ztree官网的介绍：ztree是一个依靠jquery实现的多功能树插件。具有优异的灵能，灵活的配置，并且完全开源，官网上也有大量的demo供使用者学习或者练习。同时也兼容IE、FireFox、Chrome、Opera、Safari 等浏览器。

2、ztree的使用入门

ztree在官网上提供了大量的demo供学习者练习、参考。可以将ztree的源码下载下来，根据ztree每个demo提供的路径寻找到demo的源码，同时也可以根据源码按照自己想要的样式进行修改。

• 下载

点击上图的下载就可以到下载源码的页面。

• demo学习介绍

在每个demo的右边有关于这个代码源码的路径根据下载的源码，在里面找到对应的html页面，可以将源码的html页面直接复制到自己的开发环境里面，引入js，然后慢慢调试，测试每个代码的作用。

如图所示，1处是选择demo;2处是已经做好的各种demo；3处是文件路径；4处是demo的样式。可以根据自己的选择点击2处的各个demo实例，然后将源码复制到自己的开发环境进行测试。

• ztree的api

ztree是依靠jquery实现了大量的功能，同时提供了大量的api，下面介绍下。

如图所以，ztree的api分为了各个不同的部分。每个部分代表不同的含义。

setting：是ztree树初始化的时候各种的样式设置；包括：

• async:请求的设置；
• callback:回调函数。包括当用户对一个节点点击时执行的操作、删除时执行的操作、鼠标移动到节点上执行的操作等；
• check:ztree节点选中时候的关联操作及样式。包括是radio还是check，是否选中父节点等；
• data:ztree源数据的样式，是否是json等等；
• edit:编辑时的操作；
• view:ztree节点的操作的样式等；

$.fn.ztree：提供的是ztree树的初始化和销毁的方法，一般的页面初始化的时候使用。

zTreeObject：提供的是页面中使用的对树形节点进行操作的api,包括获取树的各种节点、id、名称、父节点以及删除节点等，主要用来提供用户在页面操作时的各种功能实现。

treeNode：ztree每个树形节点的树形，包括是否被选中、是否打开、是否是叶子结点等，根据英文的名称就可以大概猜测意思。

。根据各个部分的不同功能，想要使用哪种功能可以根据api进行查找。