zTree使用小例子
阿新 • • 發佈：2018-11-02
通過json初始化樹的幾種方式
*這裡使用了easyui來進行頁面佈局，重點在於西邊的樹的初始化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <link rel="stylesheet" href="js/easyui/themes/default/easyui.css"> <link rel="stylesheet" href="js/easyui/themes/icon.css"> <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script> <!--匯入zTree--> <link rel="stylesheet" href="js/ztree/zTreeStyle.css"> <script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script> <title>Title</title> </head> <body class="easyui-layout"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">北部</div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;">南部</div> <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> <div data-options="region:'west',title:'West',split:true" style="width:100px;"> <ul id="ztree2" class="ztree"></ul> </div> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"> <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增一個面板</a> <div id="mytabs" class="easyui-tabs" data-options="fit:true"> <div data-options="iconCls:'icon-cut'" title="面板一">1111</div> <div data-options="closable:true" title="面板二">2222</div> <div title="面板三">3333</div> </div> </div> <script> //③通過ajax請求來構建樹 $(function(){ //頁面載入完成後，執行這段程式碼----動態建立ztree var setting3 = { data: { simpleData: { enable: true//使用簡單json資料構造ztree節點 } } }; //傳送ajax請求，獲取json資料 //jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript var url = "json/menu.json"; $.post(url,{},function(data){ //呼叫API初始化ztree $.fn.zTree.init($("#ztree2"), setting3, data); },'json'); }); //②通過簡單json來構架樹 // $(function(){ // //頁面載入完成後，執行這段程式碼----動態建立ztree // //通過seting來指定節點建立的方式 // var setting2 = { // data: { // simpleData: { // enable: true//使用簡單json資料構造ztree節點 // } // } // }; // //這種方式的特點就是最後一個節點作為根節點，往前進行層級推進 // //構造節點資料 // var zNodes2 = [ // {"id":"1","pId":"2","name":"節點一"},//每個json物件表示一個節點資料 // {"id":"2","pId":"3","name":"節點二"}, // {"id":"3","pId":"0","name":"節點三"} // ]; // //呼叫API初始化ztree // $.fn.zTree.init($("#ztree2"), setting2, zNodes2); // }); //①構建樹的第一種方式，通過標準json來構建樹 // $(function(){ // //根據標準json來建立類似資料夾的結構，過時了 // var setting = {}; // //構造節點資料 // var zNodes = [ // {"name":"節點一","children":[ // {"name":"節點一_1"}, // {"name":"節點一_2"} // ]},//每個json物件表示一個節點資料 // {"name":"節點二"}, // {"name":"節點三"} // ]; // //呼叫API初始化ztree，jquery引用外掛進行元素的初始化，先清空在 // $.fn.zTree.init($("#ztree1"), setting, zNodes); // }); </script> <script> $(function(){ // 動態建立tab $('#btn').bind('click', function(){ var e = $("#mytabs").tabs("exists","面板四"); if(e){ $("#mytabs").tabs("select","面板四"); }else{ $("#mytabs").tabs("add",{ title:'面板四', iconCls:'icon-edit', closable:true, content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>' }); } }); }); </script> </body> </html>
為節點新增點選事件：可以理解為左邊的樹和中間的tab進行事件繫結，顯示對應的內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <!--匯入zTree--> <link rel="stylesheet" href="js/ztree/zTreeStyle.css"> <script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script> <title>Title</title> </head> <body> <ul id="ztree1" class="ztree"></ul> <script type="text/javascript"> $(function(){ //頁面載入完成後，執行這段程式碼----動態建立ztree var setting3 = { data: { simpleData: { enable: true//使用簡單json資料構造ztree節點 } }, //此時沒辦法實現新增函式，沒有對應的id值，後期鏈 callback: { //為ztree節點繫結單擊事件 onClick: function(event, treeId, treeNode){ if(treeNode.page != undefined){ var e = $("#mytabs").tabs("exists",treeNode.name); if(e){ //已經存在，選中 $("#mytabs").tabs("select",treeNode.name); }else{ //動態新增一個選項卡 $("#mytabs").tabs("add",{ title:treeNode.name, closable:true, content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>' }); } } } } }; //傳送ajax請求，獲取json資料 //jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript var url = "json/menu.json"; $.post(url,{},function(data){ //呼叫API初始化ztree $.fn.zTree.init($("#ztree1"), setting3, data); },'json'); }); </script> </body> </html>