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 相关文章推荐
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 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
php组合排序简单实现方法
2016/10/15 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
javascript URL编码和解码使用说明
2010/04/12 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
React如何避免重渲染
2018/04/10 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
详解Python中的循环语句的用法
2015/04/09 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
团日活动策划书
2014/02/01 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
计生工作先进事迹
2014/08/15 职场文书
质量承诺书格式范文
2015/04/28 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Pytorch 实现变量类型转换
2021/05/17 Python
python数字图像处理:图像的绘制
2022/06/28 Python