好像沒找到現成的，就自己寫了一個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>