基于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多级列表:分级展开或合并,逐级获取并展示其子级数据,可以设 ...

随机推荐

第八周PSP&进度条
团队项目PSP 一.表格: C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 讨论讨论各个模块页面设计 9:30 12:30 站立会议分配 ...
web安全测试系统
最近写了个简单的web安全实践系统部署到了docker中下载方式:docker pull ju5ton1y/websecurity github Dockerfile下载地址:https://git ...
windows多线程（九） PV原语分析同步问题
一.PV原语介绍 PV原语通过操作信号量来处理进程间的同步与互斥的问题.其核心就是一段不可分割不可中断的程序. 信号量的概念1965年由著名的荷兰计算机科学家Dijkstra提出,其基本思路是用一种新 ...
ANR基础
转自:http://blog.sina.com.cn/s/blog_c0de2be70102wd1k.html 1.ANR basic knowledge ANR分类: Key Dispatch Ti ...
[51CTO]反客为主，Linux 成为微软 Azure 上最流行的操作系统
反客为主 ,Linux 成为微软 Azure 上最流行的操作系统 [世界上唯一确定不变的就是世界在不停的变化] 三年前,微软云计算 Azure 平台 CTO Mark Russinovich 说有四分 ...
C++ Primer 中文版 5th Edition 练习15.8和练习15.9的解答
练习15.8:给出静态类型和动态类型的定义. 答: 静态类型:是变量声明时的类型,或者是表达式生成的类型,这样的类型在编译时已知. 动态类型:是变量或者表达式表示的内存中的对象的类型,直到运行时才可知 ...
PHP中的PEAR是什么?
PEAR也就是为PHP扩展与应用库(PHP Extension and Application Repository),它是一个PHP扩展及应用的一个代码仓库. 补充:php中扩展pecl与pear ...
js框架总结
参考地址 http://www.techweb.com.cn/network/system/2015-12-23/2245809.shtml https://www.cnblogs.com/mbail ...
HDU4436_str2int
很好的一个题目.对于理解后缀自动机很有用. 题目给你若干数字串,总长度不超过100000,任意一个串的任意一个子串都可以拿出来单独的作为一个数字.同一个数字只算一次. 问所有不同数字的和为多少? 嗯嗯 ...
Python定义函数
在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回. 我们以自定义一个求绝对值的my_abs函数 ...

基于bootstrup treeview多级列表树插件

基于bootstrup treeview多级列表树插件的更多相关文章

随机推荐

热门专题