最近在项目中使用到了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进行查找。