【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 ...
随机推荐
- JDK1.8最新特性--Lambda表达式(重点)
一个旧版本JDK简单匿名类的用例如下所示: // Java 8之前: JButton show = new JButton("Show"); show.addActionListe ...
- 后缀树的线性在线构建-Ukkonen算法
Ukkonen算法是一个非常直观的算法,其思想精妙之处在于不断加字符的过程中,用字符串上的一段区间来表示一条边,并且自动扩展,在需要的时候把边分裂.使用这个算法的好处在于它非常好写,代码很短,并且它是 ...
- Contest 2
A:辣鸡题.搜索怎么这么难啊.不会啊. B:裸的高斯消元,看起来可以优化到n2. #include<iostream> #include<cstdio> #include< ...
- CPP 替代 PIL 图片处理(缩略图生成)
python中使用PIL(Pyhton Image Library)进行图片处理,好处就是编写简单方便,但是不能很好利用机器多核的特点,于是在项目中决定使用cpp来实现图片处理. 项目中的图片处理主要 ...
- 【BZOJ1014】火星人(Splay,哈希)
[BZOJ1014]火星人(Splay,哈希) 题面 BZOJ 题解 要动态维护这个串,一脸的平衡树. 那么用\(Splay\)维护这个哈希值就好了. 每次计算答案的时候二分+Splay计算区间哈希值 ...
- BZOJ4070 [Apio2015]雅加达的摩天楼 【分块 + 最短路】
题目链接 BZOJ4070 题解 考虑暴力建图,将每个\(B_i\)向其能到的点连边,复杂度\(O(\sum \frac{n}{p_i})\),当\(p\)比较小时不适用 考虑优化建图,每个\(dog ...
- bzoj2006: [NOI2010]超级钢琴(堆+RMQ)
和上一道题同类型...都是用堆求第k大 考虑对于每一个r,怎么求出一个最优的l.显然只需要求出前缀和,用RMQ查询前面最小的l的前缀和就好了.但是对于一个r,每个l只能选一次,选了一次之后,考虑怎么把 ...
- 【bzoj2844】albus就是要第一个出场
Time Limit: 6 Sec Memory Limit: 128 MBSubmit: 2254 Solved: 934[Submit][Status][Discuss] Descriptio ...
- db2 数据库操作JDBC .addBatch() 方法执行时,报错排查结果
今天调试db2数据的存储时,jdbc使用addBatch方法时,抛出异常,异常信息如下: [jcc][1091][10404][3.62.56] 数据转换无效:参数实例 对于所请求的转换无效. ER ...
- K8S dashboard 创建只读账户
1.创建名字为“Dashboard-viewonly“的Cluster Role,各种资源只给予了list,get,watch的权限.dashboard-viewonly.yaml --- apiVe ...