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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
Stop SQL Server
Jun 21 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
JS中的BOM应用
Feb 02 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
JS继承定义与使用方法简单示例
Feb 19 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
咖啡的传说和历史
2021/03/03 新手入门
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
css3 transform属性详解
2014/09/30 HTML / CSS
css3的过滤效果简单实例
2016/08/03 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
教师自我鉴定
2013/12/13 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
2014年外联部工作总结
2014/11/17 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js
Django框架中表单的用法
2022/06/10 Python