2015第6周三ztree的使用

今天第一次真正在开发中使用了ztree组件，在实践过程体会了从生到熟的乐趣，从开始看不太懂ztree的api到后面熟悉理解其API布局，学习其中的各demo，感觉很不错，简单记录下使用ztree的经验。

1、查找API文档：http://www.ztree.me/v3/api.php

主要理解ztree对象（treeObj）和ztree结点（node）区别

（1）ztree对象treeObj是整棵树，不是指树的根节点rootNode，可通过treeObj.getNodes()获取所有根结点的集合——说明treeObj可以不只一个根结点；


           var nodes = treeObj.getNodes();//仅仅是根节点的集合（默认情况子节点都处于 children 属性下）

可通过addNodes方法为树添加结点：

var newNodes = [{name:"newNode1"}, {name:"newNode2"}, {name:"newNode3"}];

newNodes = treeObj.addNodes(null, newNodes);//如果增加根节点，请设置 parentNode 为 null 即可,返回值是 zTree 最终添加的节点数据集合

API文档中zTreeObj中方法都是通过treeObj中调用。

（2）treeNode 节点数据详解部分是指一个Node结点拥有的属性和方法。

2、实现结点隐藏

初始化 zTree 时，如果节点设置 isHidden = true，会被自动隐藏，但请勿对已加载的节点修改此属性，隐藏 / 显示请使用 hideNode() / hideNodes() / showNode() / showNodes() 方法。

（1）隐藏节点操作，会影响 isFirstNode 和 isLastNode 属性，但是对于 getPreNode() 和 getNextNode() 方法无影响；

（2）只要父节点设置了隐藏，旗下子节点都将不会显示出来，可以通过先将该结点的子结点都添加到其父结点的子结点后再将该子结点子结点设置为空然后再将该子结点隐藏。

3、ztree结点之间关系

一般ztree操作父子结点联动需要同时维护父子结点之间的关系，即要将对应的子结点加载到父结点中也需要设置该子结点父结点为其父结点，在调用addNodes时会做两者关系的维护。

来自为知笔记(Wiz)

巴特西

2015第6周三ztree的使用

最新文章

热门文章