基于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多级列表:分级展开或合并,逐级获取并展示其子级数据,可以设 ...
随机推荐
- Hive与Hbase的区别
1. 两者分别是什么? Apache Hive是一个构建在Hadoop基础设施之上的数据仓库.通过Hive可以使用HQL语言查询存放在HDFS上的数据.HQL是一种类SQL语言,这种语言最终被 ...
- python list类型的变量相当于全局变量 可以被函数与类引用
python list类型的变量相当于全局变量 可以被函数与类引用
- 每日一问（常用的集合接口和类有哪些【二】）—ArrayList类和数组之间的转换
ArrayList的实质是数组,但是在类的实例中所存储的数组是无法访问的,因此实际上是无法直接作为数组使用,那么如何将这两者进行转化呢? Collection接口定义了toArray的方法,可将实现该 ...
- 为什么有时候访问某些加密https网站是不需要证书的？ https? ssl?
根证书是CA颁发给自己的证书, 是信任链的起点 1.所有访问https的网站都是需要证书的. 2.对于某些网站,尤其是证书颁发机构的网站,操作系统自动添加了这些网站访问需要的证书到证书管理器中,所以就 ...
- svmrank 的误差惩罚因子c选择 经验
C是一个由用户去指定的系数,表示对分错的点加入多少的惩罚,当C很大的时候,分错的点就会更少,但是过拟合的情况可能会比较严重,当C很小的时候,分错的点可能会很多,不过可能由此得到的模型也会不太正确,所以 ...
- 【JQuery】DOM元素
一.前言 接着上一章的内容,继续本章的学习. 二.内容 .get 获得由选择器指定的DOM元素, 可输入匹配元素的index编号 $(selector).get(index) .ind ...
- 【BZOJ5311/CF321E】贞鱼/Ciel and Gondolas（动态规划，凸优化，决策单调性）
[BZOJ5311/CF321E]贞鱼/Ciel and Gondolas(动态规划,凸优化,决策单调性) 题面 BZOJ CF 洛谷 辣鸡BZOJ卡常数!!!!!! 辣鸡BZOJ卡常数!!!!!! ...
- Permutations II - LeetCode
目录 题目链接 注意点 解法 小结 题目链接 Permutations II - LeetCode 注意点 不确定有几种排列 解法 解法一:因为有重复的数字所以排列的个数不确定几个,一直生成新的排列直 ...
- Android Studio & eclipse 调试技巧
如上图设置多个断点,开启调试.想跨断点移动到下一个断点,点击如下图1箭头,程序将运行一个断点到下一个断点之间需要执行的代码.如果后面代码没有断点,再次点击该按钮将会执行完程序.点击箭头2指向的按钮,可 ...
- python之旅：三元表达式、列表推导式、生成器表达式、函数递归、匿名函数、内置函数
三元表达式 #以下是比较大小,并返回值 def max2(x,y): if x > y: return x else: return y res=max2(10,11) print(res) # ...