java treeview使用详解,JS树形菜单组件Bootstrap TreeView使用方法详解

简要介绍：

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

bootstrap-treeview：

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

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

});