如何使用Bootstrap树菜单插件TreeView.js的详细说明

JQuery多级列表树插件基于Twitter Bootstrap，以简洁优雅的方式展示了一些继承的树结构，如视图树、列表树等。

实用的引导树菜单特效插件引导树视图是一个非常好的引导插件。现在很多Bootstrap做的页面都需要这个功能。这个插件需要bootstrap和jQuery 2.0及以上版本的支持，支持很多参数定制功能，比如颜色、背景色、图标、链接等。这仍然非常好。

渲染：

具体用法：

插件依赖关系

Bootstrap v3.0.3jQuery v2.0.3

以上两个外部依赖文件已经过测试，可以正常使用，其他版本的Bootstrap需要单独测试。此插件不支持引导程序2。

施用方式

第一步是在页面中引入依赖文件和bootstrap-treeview.js文件。

！-必需的样式表-链接href='。/css/bootstrap.css' rel='样式表'！-必需的JAVAScript-脚本src=' http:/js/jquery . js '/script script src=' http 3360。/js/bootstrap-treeview . js '/script html结构

您可以使用任何HTML DOM元素作为此列表树的容器：div id='tree'/div

调用插件

列表树插件最基本的调用方法如下：

函数getTree() { //一些逻辑来检索，或者生成树结构返回数据；} $('#tree ')。treeview({ data : getTree()})；数据结构

为了创建树的继承结构，需要为列表树插件提供一个具有嵌套结构的js对象。例如：

var tree=[ { text: 'Parent 1 '，node :[{ text: ' Child 1 '，node :[{ text : '孙子1' }，{ text : '孙子2' } ] }，{ text : ' Child 2 ' } }，{ text: 'Parent 2' }，{ text: 'Parent 3' }，{ text: ' Parent 4 ' }最简单的树结构只能有一个节点，这可以通过使用带有文本属性的js对象来实现：

{text: 'Node 1'}如果需要自定义更多内容，可以参考以下内容：

{ text: 'Node 1 '，icon : ' glyphicon glyphicon-stop '，selectedic : ' glyphicon glyphicon-stop '，color: '#000000 '，backColor: '#FFFFFF '，href: '#node-1 '，selectable: true，state: { checked: true，disabled: true，expanded: true.]}全局参数

参数可以自定义treeview的默认外观和行为。参数在插件初始化时使用对象传入：

//范例：初始化treeview//扩展到5个级别//，背景颜色为绿色$(“# tree”)。treeview({ data: data，//data不是可选级别： 5，backcolor : ' green ' })；可用方法

可以通过两种方式调用方法：1。插件包装器：插件的包装器可以用作访问底层方法的代理。$ ('# tree ')。treeview('方法名'，参数)必须使用数组对象传入多个参数。

2.直接使用treeview:可以通过以下两种方法之一获取treeview对象实例。

//此方法返回一个对象实例$(“# tree”)。树形视图(真)。treeview的methodname (args );//对象实例也保存在DOM元素的数据中，//可以使用‘treeview’的id进行访问。$('#tree ')。数据(“树视图”)。methodName(参数)；如果你还想深入学习，可以点击这里学习，然后附上两个精彩的话题给你：Bootstrap学习教程Bootstrap实用教程Bootstrap插件使用教程

源代码下载：http://xiaozai.jb51.net/201611/yuanma/bootstrap树视图(jb51.net)

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