基于bootstrup treeview多级列表树插件
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于bootstrup treeview多级列表树插件</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
</head>
<body>
<div class="jq22-container">
<div class="container">
<div class="row">
<div class="col-sm-4">
<form class="form-inline" role="form">
<div class="form-group">
<input type="input" class="form-control" id="input-select-node" placeholder="Identify node..." value="Parent 1">
</div>
<div class="form-group">
<button type="button" class="btn btn-success select-node pull-right" id="btn-select-node">搜索</button>
</div>
</form>
<br>
<div id="treeview-selectable" class="">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
var defaultData = [
{
text: 'Parent 1',
href: '#parent1',
tags: ['4'],
nodes: [
{
text: 'Child 1',
href: '#child1',
tags: ['2'],
nodes: [
{
text: 'Grandchild 1',
href: '#grandchild1',
tags: ['0']
},
{
text: 'Grandchild 2',
href: '#grandchild2',
tags: ['0']
}
]
},
{
text: 'Child 2',
href: '#child2',
tags: ['0']
}
]
},
{
text: 'Parent 2',
href: '#parent2',
tags: ['0']
},
{
text: 'Parent 3',
href: '#parent3',
tags: ['0']
},
{
text: 'Parent 4',
href: '#parent4',
tags: ['0']
},
{
text: 'Parent 5',
href: '#parent5' ,
tags: ['0']
}
];
var initSelectableTree = function() {
return $('#treeview-selectable').treeview({
data: defaultData,
onNodeSelected: function(event, node) {
//$('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
},
onNodeUnselected: function (event, node) {
//$('#selectable-output').prepend('<p>' + node.text + ' was unselected</p>');
}
});
};
var $selectableTree = initSelectableTree();
var findSelectableNodes = function() {
return $selectableTree.treeview('search', [ $('#input-select-node').val(), { ignoreCase: false, exactMatch: false } ]);
};
var selectableNodes = findSelectableNodes();
// Select/unselect/toggle nodes
$('#input-select-node').on('keyup', function (e) {
selectableNodes = findSelectableNodes();
$('.select-node').prop('disabled', !(selectableNodes.length >= 1));
});
});
</script>
基于bootstrup treeview多级列表树插件的更多相关文章
- 基于bootstrap的jQuery多级列表树插件 treeview
http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...
- 基于bootstrap的jQuery多级列表树插件
简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...
- Android UI 之实现多级列表TreeView
所谓TreeView就是在Windows中常见的多级列表树,在Android中系统只默认提供了ListView和ExpandableListView两种列表,最多只支持到二级列表的实现,所以如果想要实 ...
- 基于jquery下拉列表树插件代码
分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <table width= ...
- 基于 Octotree 的[码云]文件树插件
之前一直在用github上面的Octotree,现在在用gitee(主要是github的访问速度太慢了). 现在主要转到了gitee上面了,那么有没有基于 Octotree 的[码云]文件树插 ...
- 顶级jQuery树插件
顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...
- ASP.NET MVC jQuery 树插件在项目中使用方法（一）
jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...
- 基于.net 职责链来实现 插件模式
插件式的例子 QQ电脑管家,有很多工具列表,点一下工具下载后就可以开始使用了 eclipse ,X Server 等等 插件式的好处 插件降低框架的复杂性,把扩展功能从框架中剥离出来 让第三方有机会来 ...
- iOS TableView多级列表
代码地址如下:http://www.demodashi.com/demo/15006.html 效果预览 ### 一.需求 TableView多级列表:分级展开或合并,逐级获取并展示其子级数据,可以设 ...
随机推荐
- Week4-作业1
第四章 这一章主要讲了代码规范.复审和团队合作这两项内容. 在关于代码设计规范方面,书中讲到了关于goto的使用: “函数最好有单一的出口,为了达到这一目的, ...
- Head First Java & 异常
- 打开ubuntu终端的两个方法【最快速】
两种快捷方法: 1. ctrl+alt+T. 2. 桌面右击,再点击终端.
- vue 实战语法错误导致的问题记录
1. 在组件中引入mapActions import mapActions from 'vuex' 而不是 getActions 2.引入 mutations-type.js import ...
- 简单复利计算java板
一.要求: 1.客户说:帮我开发一个复利计算软件. 2如果按照单利计算,本息又是多少呢? 3.假如30年之后要筹措到300万元的养老金,平均的年回报率是3%,那么,现在必须投入的本金是多少呢? 4.利 ...
- 谁能告诉delphi7 的updatebatch使用属性说明？
谁能告诉delphi7 的updatebatch使用属性说明? ADODataSet1.UpdateBatch(arAll); 就是提交你的数据集到数据库 arCurrentOnly the upda ...
- html实现鼠标悬停变成手型实现方式
1.采用a标签实现的方式 <a href="javascript:void()">内容</a> 2.采用CSS实现的方式 // 变手形 oElement.s ...
- [Offer收割]编程练习赛23-freeloop
A. H国的身份证号码I dfs裸题. 时间复杂度\(O(n^k)\). #include <bits/stdc++.h> #define FOR(i,a,b) for (int i=a; ...
- SourceTree轻松Git项目
这篇文档的目的是:让使用Git更轻松. 看完这篇文档你能做到的是: 1.简单的用Git管理项目. 2.怎样既要开发又要处理发布出去的版本bug情况. SourceTree是一个免费的Git图形化管理工 ...
- LAMP 环境下添加多个虚拟主机（网站）
Ubuntu系统 #在/var/www目录下新建两个文件夹bbs和oa,执行完以上命令后,/var/www目录下有bbs.oa三个文件夹,名称与二级域名对应,分别存放三个系统的php文件,这样便于日后 ...