簡(jiǎn)要介紹：

之前手頭的一個(gè)項(xiàng)目需要去做一個(gè)左側(cè)的樹(shù)形菜單，右側(cè)則是一個(gè)整體的iframe，從而構(gòu)成一個(gè)整體的網(wǎng)站。一開(kāi)始是打算用bootstrap的tree-view插件，直接把菜單的數(shù)據(jù)傳過(guò)去就好了，結(jié)果后來(lái)項(xiàng)目又改了需求，菜單的內(nèi)容和圖表都是后臺(tái)動(dòng)態(tài)生成的，所以只能放棄使用bootstrap插件，自己著手寫(xiě)了一個(gè)樹(shù)形菜單。本文主要分兩部分講，一個(gè)是對(duì)于bootstrap的treeview的實(shí)踐，另一部分是介紹自己寫(xiě)的樹(shù)形菜單。

bootstrap-treeview：

組件介紹http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html

其實(shí)關(guān)于該組件在其他網(wǎng)站上已經(jīng)講得很詳細(xì)了，我就不再贅述了，但是網(wǎng)上的應(yīng)用還是有點(diǎn)問(wèn)題，這里主要講一下自己使用這個(gè)插件過(guò)程吧。

1.　html引用及結(jié)構(gòu)

引用css：文件本身的css文件、bootstrp.css文件

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

整體HTML結(jié)構(gòu)主要分為了三個(gè)部分：頭部、樹(shù)狀欄部分、iframe部分，使用組件的為樹(shù)狀欄部分：#tree

2.引用組件js設(shè)置：

具體設(shè)置代碼如下：主要思路是用data傳入菜單的數(shù)據(jù)和依靠關(guān)系，同時(shí)可以設(shè)置一些變量來(lái)控制改樹(shù)狀欄的樣式和基本功能，如代碼40-43行，具體變量對(duì)應(yīng)的數(shù)值的意義可以參見(jiàn)之前鏈接中的表格

1 (function(win) {2

3 var data =[4 {5 text: "Parent 1",6 nodes: [7 {8 text: "Child 1",9 nodes: [10 {11 text: "Grandchild 1"

12 },13 {14 text: "Grandchild 2"

15 }16 ]17 },18 {19 text: "Child 2"

20 }21 ]22 },23 {24 text: "Parent 2"

25 },26 {27 text: "Parent 3"

28 },29 {30 text: "Parent 4"

31 },32 {33 text: "Parent 5"

34 }35 ];36

37 var tree = function() {38 $('#tree').treeview({39 data: data,40 backColor: '#293541',41 color: 'white',42 onhoverColor:'#202a33;',43 showBorder: false

44 });45 }46

47 var init = function() {48 tree();49 }50

51 init();52 })(window)

設(shè)置完成之后樹(shù)狀欄的樣式如下圖所示，另外細(xì)節(jié)方面可以通過(guò)閱讀相應(yīng)參數(shù)來(lái)設(shè)置，值得一提的是樹(shù)狀欄的icon圖標(biāo)是通過(guò)bootstrap的glyphicon設(shè)置的，有興趣的童鞋可以去看一下這個(gè)東西，來(lái)為菜單設(shè)置不同的icon，不過(guò)實(shí)際效果感覺(jué)不是特別好。這也是我決定自己去搞一個(gè)樹(shù)狀欄的原因。

自定義樹(shù)狀菜單：

treeview的插件只能點(diǎn)擊菜單前面的加號(hào)icon展開(kāi)關(guān)閉，樣式的變化有限，而且我們需要根據(jù)后臺(tái)傳入的數(shù)據(jù)來(lái)動(dòng)態(tài)設(shè)置菜單的結(jié)構(gòu)和內(nèi)容，所以為了滿足這幾個(gè)需求，重新寫(xiě)了一個(gè)tree.js

js主要分成三個(gè)部分，第一個(gè)部分是為每個(gè)菜單和子菜單注冊(cè)點(diǎn)擊事件以及通過(guò)后臺(tái)傳來(lái)的數(shù)據(jù)為其綁定跳轉(zhuǎn)鏈接；第二個(gè)部分是通過(guò)ajax獲取后臺(tái)傳來(lái)的菜單數(shù)據(jù)，并將數(shù)據(jù)傳入前臺(tái)；第三個(gè)部分是通過(guò)underscore的template函數(shù)將前臺(tái)頁(yè)面進(jìn)行渲染，達(dá)到動(dòng)態(tài)實(shí)現(xiàn)樹(shù)狀欄的功能。、

相關(guān)js代碼：

1 var tree = function() {2 //一級(jí)導(dǎo)航點(diǎn)擊事件

3 $('.nodeBox').on('click', function(event) {4 var _this = $(this);5 var child = _this.parent().find('.nodechild_box');6 if (_this.attr('opened') == 'opened') {7 _this.parent().find('.childnode').hide();8 child.hide();9 _this.attr('opened', '');10 }else{11 _this.parent().find('.childnode').show();12 child.show();13 _this.attr('opened', 'opened');14 };15 });16 //二級(jí)導(dǎo)航點(diǎn)擊事件

17 $('.nodechild_box').on('click', function(event) {18 var _this = $(this);19 var child = _this.parent().find('.gchild_box');20 if (_this.attr('opened') == 'opened') {21 child.hide();22 _this.parent().find('.gchildnode').hide();23 _this.find('.add').attr('src', 'images/icon_add.png');24 _this.attr('opened', '');25 }else{26 child.show();27 _this.parent().find('.gchildnode').show();28 _this.find('.add').attr('src', 'images/icon_minus.png');29 _this.attr('opened', 'opened');30 };31 });32 //三級(jí)導(dǎo)航點(diǎn)擊事件

33 $('.gchild_box').on('click', function(event) {34 var _this = $(this);35 var child = _this.parent().find('.ggchild_box');36 if (_this.attr('opened') == 'opened') {37 child.hide();38 _this.find('.add').attr('src', 'images/icon_add.png');39 _this.attr('opened', '');40 }else{41 child.show();42 _this.find('.add').attr('src', 'images/icon_minus.png');43 _this.attr('opened', 'opened');44 };45 });46

47 //hover顯示箭頭及背景變化

48 $('.nodeBox').mouseover(function(event) {49 $(this).addClass('tree_hover');50 $(this).find('.arrow').show();51 });52 $('.nodeBox').mouseout(function(event) {53 $(this).removeClass('tree_hover');54 $(this).find('.arrow').hide();55 });56 $('.nodechild_box').mouseover(function(event) {57 $(this).addClass('box_hover');58 $(this).find('.arrow').show();59 });60 $('.nodechild_box').mouseout(function(event) {61 $(this).removeClass('box_hover');62 $(this).find('.arrow').hide();63 });64 $('.gchild_box').mouseover(function(event) {65 $(this).addClass('box_hover');66 $(this).find('.arrow').show();67 });68 $('.gchild_box').mouseout(function(event) {69 $(this).removeClass('box_hover');70 $(this).find('.arrow').hide();71 });72 $('.ggchild_box').mouseover(function(event) {73 $(this).addClass('box_hover');74 $(this).find('.arrow').show();75 });76 $('.ggchild_box').mouseout(function(event) {77 $(this).removeClass('box_hover');78 $(this).find('.arrow').hide();79 });80 };81

82 //鏈接函數(shù)

83 var tree_link = function() {84

85 var linkBox = $('[menurl]');86 linkBox.each(function(i, ele) {87 var _ele =$(ele);88 var key = _ele.attr('menurl');89 if(key != '/'){90 $(this).on('click',function(){91 $('#mainweb').attr('src', key);92 auto();93 })94 }95

96 });97 };98

99 //獲取登陸用戶數(shù)據(jù)

100 var getData = function() {101 var cond =sessionStorage.cond;102

103 $.post("XXXX", {}, function(json) {104 console.log(json)105 if(json.code == 200){106 data =json.data;107 fillUserName(data);108 fillTree(data);109 var length = $('.nodeBox').length ;110 for (var i = 0;i < length;i++) {111 var iconId =data.icons[i].iconId;112 $('.nodeBox').eq(i+1).attr('menuid',i);113 $('.nodeBox').eq(i+1).find('img').attr('src','images/'+ data.icons[iconId-1].name +'');114

115 }116 //為每個(gè)菜單添加鏈接

117 tree_link()118 }119 }, function(xhr) {120 console.log(xhr)121 });122

123 }124

125

126 var fillTree = function(data){127 var tmplDom = $('#tree');128 tmplDom.parent().html(eking.template.getHtml(tmplDom.html(),data));129 tree();130 }

HTML渲染：

1

2

3

4

5

6

7 首頁(yè)

8

9

10

11

12

13

14

>

15

16

17

18

19

20

21

>

22

23

24

25

26

27

28

29

30

31

32

33

>

34

35

36

37

38

39

40

41

42

43

44

>

45

46

47

48

49

50

51

52

53

54

55

56

后臺(tái)傳入的數(shù)據(jù)格式為

菜單效果如圖：

存在的不足和問(wèn)題

為了跟上項(xiàng)目進(jìn)度，tree.js尚未組件化，等有時(shí)間了打算把這一塊封裝為一個(gè)js組件，通過(guò)設(shè)置參數(shù)完成樹(shù)狀欄的設(shè)置。

P.S.由于個(gè)人技術(shù)水平有限，難免出現(xiàn)錯(cuò)誤，請(qǐng)多多指正 :)

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的html树状图右侧_treeview-树形菜单js组件编写及应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。