Bootstrap树形菜单插件TreeView.js使用方法详解


Posted in Javascript onNovember 01, 2016

jQuery多级列表树插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。

实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色、背景色、图标、链接等,还是很不错的。

效果图:

Bootstrap树形菜单插件TreeView.js使用方法详解

具体使用方法:

插件依赖

Bootstrap v3.0.3
jQuery v2.0.3

以上两个外部依赖文件已经经过测试可以正常使用,其他版本的Bootstrap需要另行测试。该插件不支持bootstrap 2。

使用方法

首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。

<!-- Required Stylesheets -->
<link href="./css/bootstrap.css" rel="stylesheet">
 
<!-- Required Javascript -->
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap-treeview.js"></script>

HTML结构

可以使用任何HTML DOM元素来作为该列表树的容器:
<div id="tree"></div>                   

调用插件

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

function getTree() {
 // Some logic to retrieve, or generate tree structure
 return data;
}
 
$('#tree').treeview({data: getTree()});

数据结构

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

var tree = [
 {
 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"
 }
];

最简单的树结构可以只有一个节点,使用一个带text属性的js对象来实现即可:

{
 text: "Node 1"
}

如果你需要自定义更多的内容,可以参考下面:

{
 text: "Node 1",
 icon: "glyphicon glyphicon-stop",
 selectedIcon: "glyphicon glyphicon-stop",
 color: "#000000",
 backColor: "#FFFFFF",
 href: "#node-1",
 selectable: true,
 state: {
 checked: true,
 disabled: true,
 expanded: true,
 selected: true
 },
 tags: ['available'],
 nodes: [
 {},
 ...
 ]
}

全局参数

参数可以定制treeview的默认外观和行为。参数使用一个对象来在插件初始化时传入:

// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$('#tree').treeview({
 data: data,   // data is not optional
 levels: 5,
 backColor: 'green'
});

可用方法

你可以通过两种方式来调用方法:
1、插件包装器:插件的包装器可以作为访问底层方法的代理。
$('#tree').treeview('methodName', args) 
多个参数必须使用数组对象来传入。

2、直接使用treeview:你可以通过下面两种方法中的一种来获取treeview对象实例。

//该方法返回一个treeview的对象实例
$('#tree').treeview(true)
 .methodName(args);
 
//对象实例也保存在DOM元素的data中,
//可以使用'treeview'的id来访问它。
$('#tree').data('treeview')
 .methodName(args);

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程 Bootstrap插件使用教程

源码下载:http://xiazai.3water.com/201611/yuanma/bootstraptreeview(3water.com).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 #Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 #Javascript
jQuery动态生成Bootstrap表格
Nov 01 #Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 #Javascript
jQuery双向列表选择器select版
Nov 01 #Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 #Javascript
JS button按钮实现submit按钮提交效果
Nov 01 #Javascript
You might like
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
jstree的简单实例
2016/12/01 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
python3 pygame实现接小球游戏
2019/05/14 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
python manage.py runserver流程解析
2019/11/08 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
学校党员对照检查材料
2014/08/28 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
实习班主任自我评价
2015/03/11 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
小学班级口号大全
2015/12/25 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers