html树状图右侧_treeview-树形菜单js组件编写及应用

简要介绍：

之前手头的一个项目需要去做一个左侧的树形菜单，右侧则是一个整体的iframe，从而构成一个整体的网站。一开始是打算用bootstrap的tree-view插件，直接把菜单的数据传过去就好了，结果后来项目又改了需求，菜单的内容和图表都是后台动态生成的，所以只能放弃使用bootstrap插件，自己着手写了一个树形菜单。本文主要分两部分讲，一个是对于bootstrap的treeview的实践，另一部分是介绍自己写的树形菜单。

bootstrap-treeview：

组件介绍http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html

其实关于该组件在其他网站上已经讲得很详细了，我就不再赘述了，但是网上的应用还是有点问题，这里主要讲一下自己使用这个插件过程吧。

1.　html引用及结构

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

引用js：jquery、bootstrap-treeview.js、引用该组件的treeview.js文件

整体HTML结构主要分为了三个部分：头部、树状栏部分、iframe部分，使用组件的为树状栏部分：#tree

2.引用组件js设置：

具体设置代码如下：主要思路是用data传入菜单的数据和依靠关系，同时可以设置一些变量来控制改树状栏的样式和基本功能，如代码40-43行，具体变量对应的数值的意义可以参见之前链接中的表格

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)

设置完成之后树状栏的样式如下图所示，另外细节方面可以通过阅读相应参数来设置，值得一提的是树状栏的icon图标是