说明
公司使用了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" href="./css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="./js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.ztree.all.min.js"></script>
<script>
var setting={
check:{
enable:true// 显示勾选框
},
view:{
showIcon:false, //是否显示节点的图标
showLine:true, //显示之间的连线
expandSpeed:"slow",//节点展开，折叠时的动画速度
selectedMulti:false//不允许同时选中多个节点
},
data:{
simpleData:{
enable:true,//使用简单数据模式
idKey:"id",//节点数据中保存唯一标识的属性名称
pIdKey:"pId",//节点数据中保存其父节点唯一标识的属性名称
rootPId:""//用于修正根节点父节点数据 默认值为null
}
},
callback:{}
};
var nodes = [
{id :"1",pId:"0",name :"山西省"},
{id :"2",pId:"0",name : "河北省"},
{id :"3",pId:"0",name : "内蒙省"},
{id :"4",pId:"0",name : "吉林省"},
{id :"11",pId:"1",name: "大同市"},
{id :"12",pId:"1",name: "朔州市"},
{id :"21",pId:"2",name: "石家庄"},
{id :"22",pId:"2",name: "唐山市"},
{id :"31",pId:"3",name: "赤峰市"},
{id :"32",pId:"3",name: "呼市"},
{id :"41",pId:"4",name: "长春市"},
{id :"42",pId:"4",name: "四平市"},
{id :"43",pId:"4",name: "辽源市"},
{id :"111",pId:"11",name:"浑源县"},
{id :"112",pId:"11",name: "阳高县"},
{id :"121",pId:"12",name: "山阴县"},
{id :"122",pId:"12",name: "应县"}
];
$(document).ready(function(){
$.fn.zTree.init($('#leftTree'), setting, nodes);
})
//展开树
function expendTree(){
var tree = $.fn.zTree.getZTreeObj("leftTree");
tree.expandAll(true);
}
//合并树
function closeTree(){
debugger;
var tree = $.fn.zTree.getZTreeObj("leftTree");
/* tree.expandAll(false); */ // 该方法执行效果与下面循环判断执行方法效果相同
var nodes = tree.transformToArray(tree.getNodes());
for(var i = 0;i < nodes.length; i++){
if(nodes[i].level == 0){// level属性 初始化节点数据时，有zTree增加此属性，请勿提前赋值
tree.expandNode(nodes[i], false, true, false);
}else{
tree.expandNode(nodes[i], false, true, false);
}
}
}
</script>
</head>
<body>
<ul id="leftTree" class="ztree"></ul>
<button onclick="expendTree()">展开</button>
<button onclick="closeTree()">合并</button>
</body>
</html>执行结果
页面初始效果和点击合并按钮效果
点击展开效果
参考示例：https://blog.csdn.net/zhongshijun521/article/details/73131579