学习zTree笔记——按钮控制树的展开与合并_ztree expandall

作者：小惠珠哦 | 2024-08-05 20:41:19

踩

ztree expandall

说明

公司使用了zTree插件生成树状数据，之前没有接触过，查资料发现zTree是一个依靠jQuery实现的多功能“树插件”，更多介绍详见：zTree简介，通过官方demo和网上资料进行学习，在这里记录下

正文

本例采用的是简单JSON数据作为节点，简单模式的JSON数据需要使用id/pid表示节点的父子包含关系，id表示该节点的唯一性，pid为该节点的父结点
ex:
var nodes = [ {id:1, pId:0, name: "父节点1"}, {id:11, pId:1, name: "子节点1"}, {id:12, pId:1, name: "子节点2"} ];
默认展开的节点，需要设置treeNode.open属性
无子节点的父结点，需要设置treeNode,isParent属性

本例通过参照网上的例子，实现按钮控制节点数的展开与合并，其中主要使用了expandAll(expandFlag)和expandNode (node, expandFlag, sonSign, focus, callbackFlag)方法
简单介绍这两个方法：
expandAll（expandFlag）: 展开/折叠全部节点，通过zTree对象执行此方法
expandFlag是一个Boolean类型的参数，true表示展开全部节点，false表示折叠全部节点

expandNode (node, expandFlag, sonSign, focus, callbackFlag)：展开/折叠指定的结点
node:必须是zTree内部的数据对象，此方法操作的节点
expendFlag:同上，true表示展开节点 false表示折叠节点
sonSign: 一个Boolean类型的参数，true表示全部子孙节点进行与expandFlag相同的操作， false表示只影响此节点，对于其子孙节点无任何影响
focus: 一个Boolean类型的参数，true表示展开/折叠操作后，通过设置焦点保证此焦点进入可视区域内 false表示展开/折叠操作后，不设置任何焦点，省略等同于true
callbackFlag:一个Boolean类型的参数，表示执行此方法时是否触发回调函数，省略等同于false

示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" 1
2
3
4
5
6

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小惠珠哦/article/detail/934179