今天在做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展开树节点的更多相关文章

  1. zTree实现删除树节点

    zTree实现删除树节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</titl ...

  2. 如何自定义修改ztree树节点的图标

    1.此种情况是针对后对数据没有不好判断谁是父节点和子节点的问题 ztree默认的树节点,父子节点的图标不大好看,修改图片只需要在数据的地方添加icon的键,值就是图片的相对位置,但是问题就是需要区分是 ...

  3. ElementUI如何展开指定Tree树节点

    原文:https://blog.csdn.net/gaojie_csdn/article/details/80738488 [问题] 在页面使用ElementUI的时候,想做出一个主动展开树节点的效果 ...

  4. zTree怎么判断树有节点展开或者完全关闭的

    树节点有个open属性,引用API: 记录 treeNode 节点的 展开 / 折叠 状态.1.初始化节点数据时,如果设定 treeNode.open = true,则会直接展开此节点2.叶子节点 t ...

  5. 把zTree前的展开收起图标改为三角形,且只有在点击三角形图标时才展开子节点解决方案

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  6. 使用zTree和json构建简单树节点

    我们经常碰到须要构建树结构展示的情况,我推荐使用zTree和JSON. 比如: <? php /** * * 使用zTree和json构建树节点 * */ $arr = array( 0=> ...

  7. zTree实现删除树子节点

    zTree实现删除树子节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</tit ...

  8. ztree根据treeId展开指定节点并触发单击事件

    ztree.expandNode(ztree.getNodeByParam("id",treeId,null));//展开指定节点 ztree.selectNode(ztree.g ...

  9. zTree变异篇:如何让同级树节点平铺而非垂直显示

    昨天有一个zTree的使用者在实际的项目中有着这样一个特殊的需求,要求同级树节点能够水平显示,根据设定的宽度自动换行,效果图如下所示:   通过在浏览器调试模式下观察其同级节点的css为: 这个dis ...

随机推荐

  1. SharePoint 2016 Document Center Send To Connection

    General Application setting->configure send to connection then i had to choose web application&qu ...

  2. 组件式开发框架 craftyjs

    想要少写代码,请用组件式开发吧.传统的oop,一直做着重复的事性. 先理解下概念 Entity            实体        An entity is just an ID Compone ...

  3. py27使用redis

    1.安装redis pip install redis 转载请注明博客出处:http://www.cnblogs.com/cjh-notes/

  4. [十三]SpringBoot 之 过滤器(Filter)和监听器(Listener)

    过滤器(Filter)和 监听器(Listener)的注册方法和 Servlet 一样,不清楚的可以查看下上一篇文章 代码示例 package me.shijunjie.filter; import ...

  5. 《Unix网络编程卷1:套接字联网API》读书笔记

    第一部分:简介和TCP/IP 第1章:简介 第2章:传输层:TCP.UDP和SCTP TCP:传输控制协议,复杂.可靠.面向连接协议 UDP:用户数据报协议,简单.不可靠.无连接协议 SCTP:流控制 ...

  6. P2610 [ZJOI2012]旅游

    题目描述 到了难得的暑假,为了庆祝小白在数学考试中取得的优异成绩,小蓝决定带小白出去旅游~~ 经过一番抉择,两人决定将T国作为他们的目的地.T国的国土可以用一个凸N边形来表示,N个顶点表示N个入境/出 ...

  7. Django新手图文教程-转发

    转发自:http://www.cnblogs.com/Leo_wl/p/5824541.html 一.Django简介 百度百科:开放源代码的Web应用框架,由Python语言编写...... 重点: ...

  8. 行列式(二):余子式&代数余子式

    目录 按行列展开 \(\Delta\)以下内容主要为<线性代数>的学习笔记 按行列展开 一般来说,低阶行列式的计算比高阶行列式的计算要简单得多,因此考虑用低阶行列式来表示高阶行列式.为此, ...

  9. 如何使用火狐下的两款接口测试工具RESTClient和HttpRequester发送post请求

    Chrome下有著名的Postman,那火狐也有它的左膀右臂,那就是RESTClient和HttpRequester.这两款工具都是火狐的插件,主要用来模拟发送HTTP请求,HTTP请求最常用的两种方 ...

  10. Unity3D手游开发日记(6) - 适合移动平台的水深处理

    市面上大部分的手机游戏,水面都比较粗糙,也基本没发现谁做过水深的处理. 水深的处理在PC平台比较容易,因为很容易获得每个像素的深度,比如G-Buffer,有了像素的深度,就能计算出每个像素到水面的距离 ...