JS树菜单组件Bootstrap TreeView用法的详细说明

简介：

对于手头的一个项目，需要在左侧做一个树形菜单，在右侧做一个完整的iframe，这样就形成了一个完整的网站。起初，我计划使用bootstrap的树形视图插件直接传输菜单的数据。后来项目改变了需求，菜单的内容和图表都是在后台动态生成的，我只好放弃使用bootstrap插件，自己写了一个树形菜单。本文主要分为两部分，一部分是bootstrap treeview的实践，另一部分是我自己编写的树形菜单的介绍。

引导树视图：

组件简介：//www . JB 51 . net/article/96222 . htm。

其实这个组件在其他网站上已经详细描述过了，我就不赘述了。然而，在线申请仍然存在一些问题。这里我主要讲一下这个插件的使用过程。

1.html引用和结构

引用css:文件本身的css文件，bootstrp.css文件

引用js: jQuery、bootstrap-treeview.js以及引用该组件的treeview.js文件

整个HTML结构主要分为三个部分：标题、树列部分、iframe部分和使用组件#tree的树列部分

2.参考组件js设置：

具体设置代码如下：主要思想是用数据导入菜单的数据和依赖关系，同时可以设置一些变量来控制树栏的样式和基本功能，比如代码行40-43。对应于特定变量的数值的含义可以在上一个链接的表格中看到

(function(win){ var data=[{ text: ' Parent 1 '，node :[{ text : ' Child 1 '，node :[{ text : '孙子1' }，{ text : '孙子2' } ] }，{ text : ' Child 2 ' } }，{ text: 'Parent 2' }，{ text: 'Parent 3' }var tree=function() { $('#tree ')。treeview({ data: data，backColor: '#293541 '，color: 'white '，on over color : ' # 202 a 33；'，showborder : false })；} var init=function(){ tree()；} init()；})(窗口)设置后，树栏的样式如下图所示。此外，可以通过读取相应的参数来设置细节。值得一提的是，树栏的图标图标是通过bootstrap的字体设置的。感兴趣的童鞋可以看看这个东西给菜单设置不同的图标，但是实际效果不是特别好。这就是为什么我决定自己建一个树柱。

自定义树菜单：

Treeview插件只能通过点击菜单前面的加号图标来打开和关闭，样式的改变是有限的。而且我们需要根据后台导入的数据动态设置菜单的结构和内容，所以为了满足这些需求，我们重写了一个tree.js

Js主要分为三个部分。第一部分是为每个菜单和子菜单注册点击事件，并通过后台传输的数据为它们绑定跳转链接；第二部分是通过ajax从后台获取菜单数据，并将数据发送到前台；第三部分，利用下划线的模板功能对前台页面进行渲染，从而动态实现树列功能。

相关js代码：

定义变量树=function() { //一级导航点击事件$('.nodeBox ').on('click '，function(event){ var _ this=$(this)；var child=_this.parent().查找('。node child _ box’)；if(_ this。attr(' open ')=' open '){ _ this。parent().查找('。childnode ').hide()；孩子。hide()；_这个。attr(' open '，' ')；}else{ _this.parent().查找('。childnode ').show()；孩子。show()；_这个。attr(' open '，' open ')；};});//二级导航点击事件$('.节点子框').on('click '，function(event){ var _ this=$(this)；var child=_this.parent().查找('。gchild _ box’)；if(_ this。attr(' open ')==' open '){ child。hide()；_this.parent().查找('。gchildnode ').hide()；_this.find(' .添加')。attr('src '，' images/icon _ add。png ')；_这个。attr(' open '，' ')；} else { child。show()；_this.parent().查找('。gchildnode ').show()；_this.find(' .添加')。attr('src '，' images/icon _ negative。png ')；_这个。attr(' open '，' open ')；};});//三级导航点击事件$('.gchild_box ').on('click '，function(event){ var _ this=$(this)；var child=_this.parent().查找('。ggchild _ box’)；if(_ this。attr(' open ')==' open '){ child。hide()；_this.find(' .添加')。attr('src '，' images/icon _ add。png ')；_这个。attr(' open '，' ')；} else { child。show()；_this.find(' .添加')。attr('src '，' images/icon _ negative。png ')；_这个。attr(' open '，' open ')；};});//悬停显示箭头及背景变化$('.nodeBox ').鼠标悬停(函数（事件){ $(这个)).添加CLaSS(' tree _ hover ')；$(这个)。查找('。箭头')。show()；});$('.nodeBox ').mouseout(函数（事件){ $(这个)).移除CLaSS(' tree _ hover ')；$(这个)。查找('。箭头')。hide()；});$('.节点子框').鼠标悬停(函数（事件){ $(这个)).添加CLaSS(' box _ hover ')；$(这个)。查找('。箭头')。show()；});$('.节点子框').mouseout(函数（事件){ $(这个)).移除CLaSS(' box _ hover ')；$(这个)。查找('。箭头')。hide()；});$('.gchild_box ').鼠标悬停(函数（事件){ $(这个)).添加CLaSS(' box _ hover ')；$(这个)。查找('。箭头')。show()；});$('.gchild_box ').mouseout(函数（事件){ $(这个)).移除CLaSS(' box _ hover ')；$(这个)。查找('。箭头')。hide()；});$('.ggchild_box ').鼠标悬停(函数（事件){ $(这个)).添加CLaSS(' box _ hover ')；$(这个)。查找('。箭头')。show()；});$('.ggchild_box ').mouseout(函数（事件){ $(这个)).移除CLaSS(' box _ hover ')；$(这个)。查找('。箭头')。hide()；});};//链接函数var tree _ link=function(){ var linkBox=$('[men URL]')；linkBox.each(function(i，ele){ var _ ele=$(ele)；var key=_ ele。attr('男性网址')；if(key！='/'){ $(这个).on('click '，function(){ $('#mainweb ')).attr('src '，键);auto()；}) } });};//获取登陆用户数据var getData=function(){ var cond=会话存储。cond$.post('XXXX '，{}，function(JSON){ console。日志(JSON)if(JSON。代码==200){数据=JSON。数据；fillUserName(数据);fillTree(数据);定义变量长度=$('。nodeBox ').长度；for(var I=0；一、长度；i ) { var iconId=data.icons[i].iconId$('。nodeBox ').等式^ 1 .attr('menuid '，I)；$('.nodeBox ').等式^ 1 .查找(' img ').attr('src '，' images/' data.icons[iconId-1]).名称' ');} //为每个菜单添加链接tree_link() } }，function(xhr){ console。log(xhr)})；} var fill tree=function(data){ var tmplDom=$(' # tree ')；tmplDom.parent().html(eking。模板。GetHTMl(TMplDoM。(HTMl()，数据))；tree()；}HTML渲染：

div class=' main w _ 1200 ' div class=' tree '脚本类型=' text/html ' id=' tree ' div class=' tree _ box ' div class=' NodeBox index ' men URL='注意。html ' span class=' m _ l _ 10 ' img src=' http : images/icon _ home。png ' alt=' '/span class=' m _ l _ 10 '首页/span class=' arrow fr m _ r _ 10 ' img src=' http : images/icon _ arrow。png ' alt=' '/span/div/div % var menu=data。菜单；% %用于(var I=0；一、菜单。长度；I){ % div class=' tree _ box ' div class=' NodeBox ' men URL=%=菜单[i].URL % span class=' m _ l _ 10 ' img src=' http : ' alt=' '/span span class=' m _ l _ 10 ' %=菜单[i].name %/span/div % var子菜单=菜单[I].查尔兹；% % for(var j=0；j child menus . length j){ % div class='子节点' div class=' node child _ box ' men URL=%=子菜单[j].URL % % if(子菜单[j]。查尔兹。长度！=0){ % span class=' m _ l _ 20 ' img class=' add ' src=' http : images/icon _ add。png ' alt=' '/span class=' m _ l _ 10 ' %=子菜单[j].name %/span % } else { % span class=' m _ l _ 55 ' %=子菜单[j].name %/span span class=' arrow fr m _ r _ 10 ' img src=' http : images/icon _ arrow。png ' alt=' '/span % } %/div % var cchild menu=子菜单[j].查尔兹；% % for(var k=0；k cchild menus . length k){ % div class=' gchild node ' div class=' gchild _ box ' men URL=%=cchild menu[k].URL % % if(ccild菜单[k]。查尔兹。长度！=0){ % span class=' m _ l _ 30 ' img class=' add ' src=' http : images/icon _ add。png ' alt=' '/span class=' m _ l _ 10 ' %=cchild menu[k].name %/span % } else { % span class=' m _ l _ 65 ' %=cchild menu[k].name %/span span class=' arrow fr m _ r _ 10 ' img src=' http : images/icon _ arrow。png ' alt=' '/span % } %/div % var ccchildmenus=ccchildmenus[k].查尔兹；% % for(var l=0；l ccchildmenus . length l){ % div class=' ggchild _ box ' men URL=%=ccchildmenus[l].URL % span class=' m _ l _ 70 ' %=ccchildmenu[l].name %/span span class=' arrow fr m _ r _ 10 ' img src=' http : images/icon _ arrow。png ' alt=' '/span/div % } %/div % } %/div % } %/script/div后台传入的数据格式为

菜单效果如图：

存在的不足和问题：

为了跟上项目进度，树。射流研究…尚未组件化，等有时间了打算把这一块封装为一个射流研究…组件，通过设置参数完成树状栏的设置。

附言由于个人技术水平有限，难免出现错误，请多多指正：)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。