好像没找到现成的，就自己写了一个demo。
效果如下：
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="../jquery-2.1.4.js"></script>
<link href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript">
//获取当前父节点 参数：等级
var getNodeByLevel = function (arr, level) {
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
if (item.level == level) {
return item;
}
}
return null;
};
//折叠节点 非当前父节点
var collapseNodes = function (allTwoNodes, twoNode) {
for (var i = 0; i < allTwoNodes.length; i++) {
var item = allTwoNodes[i];
if ((twoNode != null) && (twoNode.id == item.id)) {
continue;
}
treeObj.expandNode(item, false, true, false);
}
}
var zNodes = [
// 第一层
{ id: 1, pId: 0, name: "父节点1 - 展开", open: true },
// 第二层
{ id: 11, pId: 1, name: "父节点11 - 折叠", icon: "zTree_v3/css/zTreeStyle/img/diy/2.png", open: true },
// 第三层
{ id: 111, pId: 11, name: "叶子节点111", click: false, open: true },
{ id: 112, pId: 11, name: "叶子节点112", open: true },
// 第四层
{ id: 1121, pId: 112, name: "三级1" },
{ id: 1122, pId: 112, name: "三级2" },
{ id: 1123, pId: 112, name: "三级3" },
// 第二层
{ id: 12, pId: 1, name: "父节点12", open: true },
// 第三层
{ id: 121, pId: 12, name: "叶子节点121" },
{ id: 122, pId: 12, name: "叶子节点122", open: true },
// 第四层
{ id: 1221, pId: 122, name: "三级1" },
{ id: 1222, pId: 122, name: "三级2" },
{ id: 1223, pId: 122, name: "三级3" },
];
var setting = {
type: "expandAll",//全部展开
view: {
showLine: false,//不显示连接线
},
data: {
simpleData: {
enable: true
}
},
callback: { //回调函数
beforeClick: function (treeId, treeNode, clickFlag) {
},
onClick: function (vent, treeId, treeNode, clickFlag) {
//console.log(treeNode);
//console.log(treeNode.getParentNode());
//console.log(treeNode.getIndex());
//console.log(treeNode.getPath());
var nodes = treeNode.getPath();
var twoNode = getNodeByLevel(nodes, 1);
var oneNode = getNodeByLevel(nodes, 0);
var allTwoNodes = oneNode.children;
collapseNodes(allTwoNodes, twoNode);
},
onCollapse: function (event, treeId, treeNode) {
//alert('onCollapse / 折叠');//折叠
},
onExpand: function (event, treeId, treeNode) {
//alert('onExpand / 展开');//展开
}
}
};
//树初始化
var treeObj = null;
$(document).ready(function () {
treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
</head>
<body>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<!-- ztree的容器 -->
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</body>
</html>