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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
js 数组克隆方法 小结
Mar 20 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
jquery自定义显示消息数量
2017/12/19 jQuery
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
python实现数组插入新元素的方法
2015/05/22 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python_LDA实现方法详解
2017/10/25 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
治庸问责心得体会
2014/09/12 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
导师对论文的学术评语
2015/01/04 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js