2015第6周三ztree的使用

初次使用Ztree组件在开发中的应用,从理解API到实际操作,详细记录了从生到熟的过程,包括查找API文档、实现节点隐藏初始化、理解结点关系等关键步骤,分享了使用经验。
今天第一次真正在开发中使用了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时会做两者关系的维护。





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值