引入ztree組件
<link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>向body中添加div
<div>
<div id="treeDemo" class="ztree">
</div>
</div>添加ztree設置
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的參數配置，深入使用請參考 API 文檔（setting 配置詳解）
var setting = {};
// zTree 的數據屬性，深入使用請參考 API 文檔（zTreeNode 節點數據詳解）
var zNodes = [{
name: "test1",
open: true,
children: [
{ name: "test1_1" }, { name: "test1_2" }
]
},
{
name: "test2",
open: true,
children: [
{ name: "test2_1" }, { name: "test2_2" }
]
}
];
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTreeObj.expandAll(true);//展開樹
});
</SCRIPT>HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ztree測試頁面</title>
<link href="static/jquery-ztree/3.5.36/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<div id="treeDemo" class="ztree">
</div>
</div>
<SCRIPT LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的參數配置，深入使用請參考 API 文檔（setting 配置詳解）
var setting = {};
// zTree 的數據屬性，深入使用請參考 API 文檔（zTreeNode 節點數據詳解）
var zNodes = [{
name: "test1",
open: true,
children: [
{ name: "test1_1" }, { name: "test1_2" }
]
},
{
name: "test2",
open: true,
children: [
{ name: "test2_1" }, { name: "test2_2" }
]
}
];
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</SCRIPT>
</body>
</html>設置展開樹
$(document).ready(function() {
zTreeObj = $.fn.zTree.init($("#ztree"), setting, zNodes);
//展開所以節點
//zTreeObj.expandAll(true);
//展開第一級數節點
var nodes = zTreeObj.getNodesByParam("level", 0);
for(var i = 0; i < nodes.length; i++) {
zTreeObj.expandNode(nodes[i], true, false, false);
}
});