bootstrap怎么做树形菜单内容从数据库树形菜单里读

来源：蜘蛛抓取(WebSpider) 时间：2016-11-21 12:54 标签： 数据库树形菜单

这篇文章主要为大家详细介绍了js組件Bootstrap TreeView使用方法本文一部分针对于bootstrap的treeview的实践，另一部分是介绍自己写的树形菜单具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

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

2.引用组件js设置：

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

　　设置唍成之后树状栏的样式如下图所示另外细节方面可以通过阅读相应参数来设置，值得一提的是树状栏的icon图标是通过bootstrap的glyphicon设置的有兴趣的童鞋可以去看一下这个东西，来为菜单设置不同的icon不过实际效果感觉不是特别好。这也是我决定自己去搞一个树状栏的原因

　　treeview的插件只能点击菜单前面的加号icon展开关闭，样式的变化有限而且我们需要根据后台传入的数据来动态设置菜单的结构和内容，所以为了满足這几个需求重新写了一个tree.js

　　js主要分成三个部分，第一个部分是为每个菜单和子菜单注册点击事件以及通过后台传来的数据为其绑定跳轉链接；第二个部分是通过ajax获取后台传来的菜单数据并将数据传入前台；第三个部分是通过underscore的template函数将前台页面进行渲染，达到动态实现樹状栏的功能、 

 //hover显示箭头及背景变化
 
 
 
 
 
 //为每个菜单添加链接

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

P.S.由于个人技术水平有限，难免出现错误请多多指正 :)

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

我要回帖

更多关于 数据库树形菜单 的文章

 

随机推荐