【zTree】zTree展开树节点
今天在做zTree树的时候想着将第一级tree展开,于是利用下面方法:
/**
* 展开树节点的第一层
*/
function openFirstTreenode(){
// 获取树对象
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
/* 获取所有树节点 */
var nodes = treeObj.transformToArray(treeObj.getNodes());
//当再次点击节点时条件不符合,直接跳出方法
// 遍历树节点设置树节点为选中
for (var i = 0, length_1 = nodes.length; i < length_1; i++) {
if(nodes[i].level == 0){
alert(nodes[i].open)
nodes[i].open = true;
}
}
}
根据ztree的官网介绍,open属性是设置是否展开此节点,level是树的等级。可是发现这种方法只能展开除一级之外的其他节点,对根节点却不生效,百度找到以下方法:
下面会直接展开第一级树:
/**
* 展开树节点的第一层
*/
function openFirstTreenode(){
// 获取树对象
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
/* 获取所有树节点 */
var nodes = treeObj.transformToArray(treeObj.getNodes());
//展开第一级树
treeObj.expandNode(nodes[0], true);
}
效果:
如果想展开树的所有节点,需要以下JS:
/**
* 展开树的所有节点
*/
function openAllTreenode(){ // 获取树对象
var treeObj = $.fn.zTree.getZTreeObj("treeDiv");
/* 获取所有树节点 */
var nodes = treeObj.transformToArray(treeObj.getNodes());
// 展开除第一级之外的其他节点
for (var i = 0, length_1 = nodes.length; i < length_1; i++) {
if(nodes[i].level == 0){
continue;
}
nodes[i].open = true;
}
//展开第一级节点
treeObj.expandNode(nodes[0], true); }
效果:
补充: expandNode方法的官方解释:
展开树的第一层节点关闭其他层节点的操作
/**
* 展开树节点的第一层且关闭其他节点
*/
function openFirstTreenode(){
// 获取树对象
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
/* 获取所有树节点 */
var nodes = treeObj.transformToArray(treeObj.getNodes());
// 关闭所有节点
for (var i = 0, length_1 = nodes.length; i < length_1; i++) {
treeObj.expandNode(nodes[i], false);//第二个参数为false证明是折叠
}
//展开第一级节点
treeObj.expandNode(nodes[0], true);//第二个参数为true证明是展开
}
【zTree】zTree展开树节点的更多相关文章
- zTree实现删除树节点
zTree实现删除树节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</titl ...
- 如何自定义修改ztree树节点的图标
1.此种情况是针对后对数据没有不好判断谁是父节点和子节点的问题 ztree默认的树节点,父子节点的图标不大好看,修改图片只需要在数据的地方添加icon的键,值就是图片的相对位置,但是问题就是需要区分是 ...
- ElementUI如何展开指定Tree树节点
原文:https://blog.csdn.net/gaojie_csdn/article/details/80738488 [问题] 在页面使用ElementUI的时候,想做出一个主动展开树节点的效果 ...
- zTree怎么判断树有节点展开或者完全关闭的
树节点有个open属性,引用API: 记录 treeNode 节点的 展开 / 折叠 状态.1.初始化节点数据时,如果设定 treeNode.open = true,则会直接展开此节点2.叶子节点 t ...
- 把zTree前的展开收起图标改为三角形,且只有在点击三角形图标时才展开子节点解决方案
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...
- 使用zTree和json构建简单树节点
我们经常碰到须要构建树结构展示的情况,我推荐使用zTree和JSON. 比如: <? php /** * * 使用zTree和json构建树节点 * */ $arr = array( 0=> ...
- zTree实现删除树子节点
zTree实现删除树子节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</tit ...
- ztree根据treeId展开指定节点并触发单击事件
ztree.expandNode(ztree.getNodeByParam("id",treeId,null));//展开指定节点 ztree.selectNode(ztree.g ...
- zTree变异篇:如何让同级树节点平铺而非垂直显示
昨天有一个zTree的使用者在实际的项目中有着这样一个特殊的需求,要求同级树节点能够水平显示,根据设定的宽度自动换行,效果图如下所示: 通过在浏览器调试模式下观察其同级节点的css为: 这个dis ...
随机推荐
- 第194天:js---函数对象详解(arguments、length)
一.函数即对象 function add1(a,b){ return a+b; } //Function对象的实例 -- 高级技巧 --- 写框架必须用的... //前面表示参数,后面表示函数语句 v ...
- angular 延迟更新方法
失去焦点后更新: <input ng-model="name" ng-model-options="{updateOn:'blur'}" />{{n ...
- EM算法【转】
混合高斯模型和EM算法 这篇讨论使用期望最大化算法(Expectation-Maximization)来进行密度估计(density estimation). 与K-means一样,给定的训练样本是, ...
- CodeForces - 955B(用char会超时。。。)
#include <bits/stdc++.h> #define mem(a, b) memset(a, b, sizeof(a)) using namespace std; , INF ...
- 在华为eNSP中配置简单的DHCP
拓扑图,如图1 图1 在AR1中的配置过程如图2 图2 通过PC1查看是否分配了地址,如图3 图3
- 洛谷 P1854 花店橱窗布置 【dp】
题目描述 某花店现有F束花,每一束花的品种都不一样,同时至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,从左到右按1到V顺序编号,V是花瓶的数目.花束可以移动,并且每束花用1到F的整数标识 ...
- 洛谷 P3723 [AH2017/HNOI2017]礼物 解题报告
P3723 [AH2017/HNOI2017]礼物 题目描述 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手环,一个留给自己,一个送给她.每个手环上各有 \(n\) 个 ...
- [Wf2011]Chips Challenge
两个条件都不太好处理 每行放置的个数实际很小,枚举最多放x 但还是不好放 考虑所有位置先都放上,然后删除最少使得合法 为了凑所有的位置都考虑到,把它当最大流 但是删除最少,所以最小费用 行列相关,左行 ...
- 7.Configurator API 详细介绍
一.Configurator类介绍与API解释 1.Configurator类介绍 1)用于设置脚本动过的默认延时 2)功能 a.可调节两个模拟动作间的默认时间间隔 b.可调节输入文本的输入时间间隔 ...
- 手脱tElock 0.98b1 -> tE!
声明: 只为纪录自己的脱壳历程,高手勿喷 第一种:两次内存法 注: ①这是在win7x32系统上运行的脱壳,所以可能地址不同 ②修复的时候用等级三修复,最后修复不了的剪切掉然后转存合一正常运行,已测试 ...