树形插件：bootstrap-treeview
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap tree</title>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/css/bootstrap-treeview.min.css" />
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../bootstrap-3.3.7/plugin/bootstrap-treeview.min.js"></script>
</head>
<body>
<div id="tree1"></div>
<script type="text/javascript">
var defaultData = [
{
text: 'Parent 1',
href: '#parent1',
tags: ['id4'],
nodes: [
{
text: 'Child 1',
href: '#child1',
tags: ['id2'],
nodes: [
{
text: 'Grandchild 1',
href: '#grandchild1',
tags: ['id20']
},
{
text: 'Grandchild 2',
href: '#grandchild2',
tags: ['id21']
}
]
},
{
text: 'Child 2',
href: '#child2',
tags: ['id22']
}
]
},
{
text: 'Parent 2',
href: '#parent2',
tags: ['id32']
},
{
text: 'Parent 3',
href: '#parent3',
tags: ['id40']
},
{
text: 'Parent 4',
href: '#parent4',
tags: ['id50']
},
{
text: 'Parent 5',
href: '#parent5' ,
tags: ['id60']
}
];
$('#tree1').treeview({
data:defaultData,
onNodeSelected: function(event, data) {
if(data && data.href){
// 打开相应的页面，内嵌iframe的方式
//$('#currentPage').attr('src', data.href);
alert(data.tags[0]);
}
}
});
</script>
</body>
</html>
分享到：
相关推荐
Bootstrap Treeview 是一个基于Bootstrap框架的插件，用于在网页中展示层次结构的数据，例如组织结构、文件系统或导航菜单。这个插件通过JavaScript和CSS实现了交互式的树形视图，使得用户可以轻松地展开、折叠节点...
强烈建议初次使用bootstrap的人参考，例子很全...bootstrap树控件使用bootstrap-treeview.js实现树前边多选框checkbox 并实现， 0、获取选中的项 1、点击父级的多选框，自己默认选中 2、全选 3、反选 4、展开、 5、折叠
Bootstrap Treeview是一款基于Bootstrap框架的交互式树形视图组件，它使得在Web应用中展示层级数据变得简单直观。在官方版本中，虽然提供了丰富的功能，但并未直接支持动态加载或懒加载。动态加载（也称为懒加载）是...
这个压缩包文件jonmiles-bootstrap-treeview-542f57e包含了实现该功能所需的两个核心文件：`bootstrap-treeview.css`和`bootstrap-treeview.js`。 `bootstrap-treeview.css`是CSS样式表文件，负责定义Bootstrap ...
强烈建议初次使用bootstrap的人参考，例子很全...bootstrap树控件使用bootstrap-treeview.js实现树前边多选框checkbox 并实现， 0、获取选中的项 1、点击父级的多选框，自己默认选中 2、全选 3、反选 4、展开、 5、折叠
Bootstrap Treeview 是一个基于 Bootstrap 的 jQuery 插件，用于显示树形结构数据。该插件支持多级列表树结构，能够以简单和优雅的方式显示继承树结构，如视图树、列表树等。 在本文中，我们将使用 Bootstrap ...
在本项目 "bootstrap-treeview-demo" 中，你将找到一个演示如何使用这个组件的实例，帮助你快速理解和应用。 1. **Bootstrap Treeview 基本概念：** - **节点（Node）**：树形结构的基本元素，可以包含子节点，...
这个“bootstrap-treeview-demo增删改无刷新”示例提供了一个完整的解决方案，展示如何在不刷新整个页面的情况下对树形视图进行添加、删除和修改操作。通过这种方式，可以提高用户体验，因为用户界面在进行这些操作...
bootstrap框架需要的js bootstrap-treeview.min.js
Bootstrap Treeview是一款基于jQuery和Bootstrap库的插件，它提供了美观且功能丰富的树形视图。这个特定的压缩包文件包含了一个实现可搜索下拉树形功能的示例，这在许多Web应用中非常有用，比如用于导航菜单、组织...
npm install --save bootstrap-vue-treeview 入门 Webpack 如果使用Webpack捆绑器（推荐），则可以导入组件并在本地注册： import { bTreeView } from 'bootstrap-vue-treeview' [ ... ] components: { bTreeView...
在这个“bootstrap-treeview-master”压缩包中，包含了完整的源代码和演示示例，帮助开发者更好地理解和应用这个组件。 Bootstrap Treeview 主要特性包括： 1. **可折叠/展开节点**：用户可以点击节点来展开或折叠...
BootstrapTable 是一个基于 Bootstrap 框架的前端数据展示插件，它提供了丰富的功能，如分页、排序、过滤和自定义操作等。在本文中，我们将深入探讨 "bootstraptable-treeview"，这是一个用于在 BootstrapTable 中...
Bootstrap TreeView是一款基于Bootstrap框架的可扩展的树形视图组件，它允许用户以美观、交互的方式展示层次结构的数据。在“bootstrap TreeView全选单选，定位选触发事件实例”中，我们将深入探讨如何实现这个组件...
bootstrap-treeview.js下载
Bootstrap Treeview 是一个基于流行的前端框架 Bootstrap 的扩展插件，用于在网页中创建美观且功能丰富的树形结构。这个插件允许用户进行多种交互操作，如全选、反选、折叠和展开节点，使得它在权限管理和数据组织...
Bootstrap Treeview是一个基于Bootstrap框架的交互式树形视图组件，它允许用户以美观和可操作的方式展示层次结构数据。这个压缩包“bootstrap-treeview.zip”包含了一个经过修改的“bootstrap-treeview.js”文件，...
bootstrap树控件使用bootstrap-treeview.js实现树前边多选框checkbox 并实现， 0、获取选中的项 1、点击父级的多选框，自己默认选中 2、全选 3、反选 4、展开、 5、折叠
TreeView演示注意数据中必须包含parentId属性，根节点parentId=null ，子例程中根据配置的parentId == options[treeId] 。例如配置项\u4e2dtreeId='id' ，那么子上游的parentId属性将父父的id 数据必须包含parentId...
这个"patternfly-bootstrap-treeview-master"压缩包包含了Java API实现的Bootstrap Treeview组件，版本号为namev77，主要用于Java开发者集成到他们的项目中。 在Bootstrap Treeview中，主要涉及以下关键知识点： 1...