JS樹形菜單組件Bootstrap TreeView使用方法詳解_javascript技巧

簡要介紹：　　

之前手頭的一個項目需要去做一個左側的樹形菜單，右側則是一個整體的iframe，從而構成一個整體的網站。一開始是打算用bootstrap的tree-view外掛程式，直接把菜單的資料傳過去就好了，結果後來項目又改了需求，菜單的內容和圖表都是後台動態產生的，所以只能放棄使用bootstrap外掛程式，自己著手寫了一個樹形菜單。本文主要分兩部分講，一個是對於bootstrap的treeview的實踐，另一部分是介紹自己寫的樹形菜單。

bootstrap-treeview：

組件介紹：http://www.jb51.net/article/96222.htm

其實關於該組件在其他網站上已經講得很詳細了，我就不再贅述了，但是網上的應用還是有點問題，這裡主要講一下自己使用這個外掛程式過程吧。

1.　html引用及結構

　　引用css：檔案本身的css檔案、bootstrp.css檔案

　　引用js：jquery、bootstrap-treeview.js、引用該組件的treeview.js檔案

　　整體HTML結構主要分為了三個部分：頭部、樹狀欄部分、iframe部分，使用組件的為樹狀欄部分：#tree

2.引用組件js設定：

　　具體設定代碼如下：主要思路是用data傳入菜單的資料和依靠關係，同時可以設定一些變數來控制改樹狀欄的樣式和準系統，如代碼40-43行，具體變數對應的數值的意義可以參見之前連結中的表格

(function(win) {  var data = [  {  text: "Parent 1",  nodes: [  {  text: "Child 1",  nodes: [   {   text: "Grandchild 1"   },   {   text: "Grandchild 2"   }  ]  },  {  text: "Child 2"  }  ]  },  {  text: "Parent 2"  },  {  text: "Parent 3"  },  {  text: "Parent 4"  },  {  text: "Parent 5"  } ];    var tree = function() { $('#tree').treeview({  　data: data,  backColor: '#293541',  color: 'white',  onhoverColor:'#202a33;',  showBorder: false  });  }  var init = function() { tree(); }  init();})(window)

　　設定完成之後樹狀欄的樣式如下圖所示，另外細節方面可以通過閱讀相應參數來設定，值得一提的是樹狀欄的icon表徵圖是通過bootstrap的glyphicon設定的，有興趣的童鞋可以去看一下這個東西，來為菜單設定不同的icon，不過實際效果感覺不是特別好。這也是我決定自己去搞一個樹狀欄的原因。

　　

自訂樹狀菜單：

　　treeview的外掛程式只能點擊菜單前面的加號icon展開關閉，樣式的變化有限，而且我們需要根據後台傳入的資料來動態設定菜單的結構和內容，所以為了滿足這幾個需求，重新寫了一個tree.js

　　js主要分成三個部分，第一個部分是為每個菜單和子功能表註冊點擊事件以及通過後台傳來的資料為其綁定跳轉連結；第二個部分是通過ajax擷取後台傳來的菜單資料，並將資料傳入前台；第三個部分是通過underscore的template函數將前台頁面進行渲染，達到動態實現樹狀欄的功能。、

　　相關js代碼：

 var tree = function() { //一級導航點擊事件 $('.nodeBox').on('click', function(event) {  var _this = $(this);  var child = _this.parent().find('.nodechild_box');  if (_this.attr('opened') == 'opened') {  _this.parent().find('.childnode').hide();  child.hide();  _this.attr('opened', '');  }else{  _this.parent().find('.childnode').show();  child.show();  _this.attr('opened', 'opened');  }; }); //二級導航點擊事件 $('.nodechild_box').on('click', function(event) {  var _this = $(this);  var child = _this.parent().find('.gchild_box');  if (_this.attr('opened') == 'opened') {  child.hide();  _this.parent().find('.gchildnode').hide();  _this.find('.add').attr('src', 'images/icon_add.png');  _this.attr('opened', '');  }else{  child.show();  _this.parent().find('.gchildnode').show();  _this.find('.add').attr('src', 'images/icon_minus.png');  _this.attr('opened', 'opened');  }; }); //三級導航點擊事件 $('.gchild_box').on('click', function(event) {  var _this = $(this);  var child = _this.parent().find('.ggchild_box');  if (_this.attr('opened') == 'opened') {  child.hide();  _this.find('.add').attr('src', 'images/icon_add.png');  _this.attr('opened', '');  }else{  child.show();  _this.find('.add').attr('src', 'images/icon_minus.png');  _this.attr('opened', 'opened');  }; }); //hover顯示箭頭及背景變化 $('.nodeBox').mouseover(function(event) {  $(this).addClass('tree_hover');  $(this).find('.arrow').show(); }); $('.nodeBox').mouseout(function(event) {  $(this).removeClass('tree_hover');  $(this).find('.arrow').hide(); }); $('.nodechild_box').mouseover(function(event) {  $(this).addClass('box_hover');  $(this).find('.arrow').show(); }); $('.nodechild_box').mouseout(function(event) {  $(this).removeClass('box_hover');  $(this).find('.arrow').hide(); }); $('.gchild_box').mouseover(function(event) {  $(this).addClass('box_hover');  $(this).find('.arrow').show(); }); $('.gchild_box').mouseout(function(event) {  $(this).removeClass('box_hover');  $(this).find('.arrow').hide(); }); $('.ggchild_box').mouseover(function(event) {  $(this).addClass('box_hover');  $(this).find('.arrow').show(); }); $('.ggchild_box').mouseout(function(event) {  $(this).removeClass('box_hover');  $(this).find('.arrow').hide(); }); };  //連結函數 var tree_link = function() {  var linkBox = $('[menurl]'); linkBox.each(function(i, ele) {  var _ele = $(ele);  var key = _ele.attr('menurl');  if(key != '/'){  $(this).on('click',function(){   $('#mainweb').attr('src', key);   auto();  })   }   }); };  //擷取登陸使用者資料 var getData = function() { var cond = sessionStorage.cond;   $.post("XXXX", {}, function(json) {  console.log(json)  if(json.code == 200){  data = json.data;  fillUserName(data);  fillTree(data);  var length = $('.nodeBox').length ;  for (var i = 0;i < length;i++) {     var iconId = data.icons[i].iconId;   $('.nodeBox').eq(i+1).attr('menuid',i);   $('.nodeBox').eq(i+1).find('img').attr('src','images/'+ data.icons[iconId-1].name +'');  }  //為每個菜單添加連結  tree_link()  } }, function(xhr) {  console.log(xhr) }); }   var fillTree = function(data){ var tmplDom = $('#tree'); tmplDom.parent().html(eking.template.getHtml(tmplDom.html(),data)); tree(); }

HTML渲染：  

<div class="main w_1200"> <div class="tree"> <script type="text/html" id="tree">  <div class="tree_box">  <div class="nodeBox index" menurl="notice.html">   <span class="m_l_10"><img src="images/icon_home.png" alt=""></span>   <span class="m_l_10">首頁</span>   <span class="arrow fr m_r_10"><img src="images/icon_arrow.png" alt=""></span>  </div>  </div>  <%var menus = data.menus;%>  <%for(var i = 0;i < menus.length;i++){%>  <div class="tree_box">  <div class="nodeBox" menurl=<%=menus[i].url%> >   <span class="m_l_10"><img src="" alt=""></span>   <span class="m_l_10"><%=menus[i].name%></span>  </div>  <%var childmenus = menus[i].childs;%>  <%for(var j = 0;j < childmenus.length;j++){%>  <div class="childnode">   <div class="nodechild_box" menurl=<%=childmenus[j].url%> >   <%if(childmenus[j].childs.length != 0){%>   <span class="m_l_20"><img class="add" src="images/icon_add.png" alt=""></span>   <span class="m_l_10"><%=childmenus[j].name%></span>   <%}else{%>   <span class="m_l_55"><%=childmenus[j].name%></span>   <span class="arrow fr m_r_10"><img src="images/icon_arrow.png" alt=""></span>   <%}%>   </div>   <%var cchildmenus = childmenus[j].childs;%>   <%for(var k = 0;k < cchildmenus.length;k++){%>   <div class="gchildnode">   <div class="gchild_box" menurl=<%=cchildmenus[k].url%> >    <%if(cchildmenus[k].childs.length != 0){%>    <span class="m_l_30"><img class="add" src="images/icon_add.png" alt=""></span>    <span class="m_l_10"><%=cchildmenus[k].name%></span>    <%}else{%>    <span class="m_l_65"><%=cchildmenus[k].name%></span>    <span class="arrow fr m_r_10"><img src="images/icon_arrow.png" alt=""></span>    <%}%>   </div>   <%var ccchildmenus = cchildmenus[k].childs;%>   <%for(var l = 0;l < ccchildmenus.length;l++){%>   <div class="ggchild_box" menurl=<%=ccchildmenus[l].url%> >    <span class="m_l_70"><%=ccchildmenus[l].name%></span>    <span class="arrow fr m_r_10"><img src="images/icon_arrow.png" alt=""></span>   </div>   <%}%>   </div>   <%}%>  </div>  <%}%>  </div> <%}%> </script> </div>

後台傳入的資料格式為

菜單效果如圖：

存在的不足和問題：

為了跟上項目進度，tree.js尚未組件化，等有時間了打算把這一塊封裝為一個js組件，通過設定參數完成樹狀欄的設定。

P.S.由於個人技術水平有限，難免出現錯誤，請多多指正 :)

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。