html树状图右侧_treeview-树形菜单js组件编写及应用
簡(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)題。
- 上一篇: OpenJudge NOI 3.3 33
- 下一篇: java 数组的索引_java如何寻找数