小編給大家分享一下基于zTree樹形菜單的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
在每個節點添加 id 和 pid， id 表示當前節點編號，pid 表示父節點編號
第一步：在頁面顯示菜單位置，添加 ul設置 class=”ztree”
第二步：開啟簡單數據格式支持
第三步：編寫樹形菜單數據
第四步：生成樹形菜單
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ztree樹形菜單的使用</title>
<!-- 導入jquery核心類庫 -->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<!-- 導入easyui類庫 -->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" >
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<!--引入ztree-->
<script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" rel="external nofollow" />
<script type="text/javascript">
//頁面加載后執行
$(function() {
//1.進行ztree樹形菜單設置，開啟簡單json數據支持
var setting = {
data:{
simpleData:{
enable:true//開啟簡單json數據格式支持
}
}
};
//2.提供ztree樹形菜單數據
var zNodes = [
{id:1,pId:0,name:"父節點一"},
{id:2,pId:0,name:"父節點二"},
{id:11,pId:1,name:"子節點一"},
{id:12,pId:1,name:"子節點二"},
{id:13,pId:2,name:"子節點三"},
{id:14,pId:2,name:"子節點四"}
];
//3.生成樹形菜單
$.fn.zTree.init($("#baseMenu"),setting,zNodes);
});
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'你我他學習吧-學習Java的好博客！'" ></div>
<div data-options="region:'west',title:'菜單導航'" >
<!--折疊面板-->
<div class="easyui-accordion" data-options="fit:true">
<div data-options="title:'基礎菜單'">
<!--通過ztree插件，制作樹形菜單-->
<ul id="baseMenu" class="ztree"></ul>
</div>
<div data-options="title:'系統菜單'">你我他學習吧</div>
</div>
</div>
<div data-options="region:'center',title:'中部區域'">
<!--選項卡面板-->
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
<div data-options="title:'CSDN博客',closable:true">選項卡面板一</div>
<div data-options="title:'博客園',closable:true">選項卡面板二</div>
</div>
</div>
<div data-options="region:'east',title:'東部區域'" ></div>
<div data-options="region:'south',title:'南部區域'" ></div>
</body>
</html>以上是“基于zTree樹形菜單的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
