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进行查找。

猜你喜欢

转载自blog.csdn.net/fengyibande/article/details/80869097