zTree树形菜单使用实例
生活随笔
收集整理的這篇文章主要介紹了
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"><link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="../css/default.css"><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" /><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的好博客！'" style="height:100px"></div><div data-options="region:'west',title:'菜單導航'" style="width:200px"><!--折疊面板--><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:'東部區域'" style="width:100px"></div><div data-options="region:'south',title:'南部區域'" style="height:100px"></div></body></html> 與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的zTree树形菜单使用实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery EasyUI 选项卡面板t
- 下一篇： zTree树形菜单交互选项卡效果实现