<!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多级列表树插件的更多相关文章

  1. 基于bootstrap的jQuery多级列表树插件 treeview

    http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...

  2. 基于bootstrap的jQuery多级列表树插件

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

  3. Android UI 之实现多级列表TreeView

    所谓TreeView就是在Windows中常见的多级列表树,在Android中系统只默认提供了ListView和ExpandableListView两种列表,最多只支持到二级列表的实现,所以如果想要实 ...

  4. 基于jquery下拉列表树插件代码

    分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width= ...

  5. 基于 Octotree 的[码云]文件树插件

      之前一直在用github上面的Octotree,现在在用gitee(主要是github的访问速度太慢了).   现在主要转到了gitee上面了,那么有没有基于 Octotree 的[码云]文件树插 ...

  6. 顶级jQuery树插件

    顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...

  7. ASP.NET MVC jQuery 树插件在项目中使用方法（一）

    jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...

  8. 基于.net 职责链来实现 插件模式

    插件式的例子 QQ电脑管家,有很多工具列表,点一下工具下载后就可以开始使用了 eclipse ,X Server 等等 插件式的好处 插件降低框架的复杂性,把扩展功能从框架中剥离出来 让第三方有机会来 ...

  9. iOS TableView多级列表

    代码地址如下:http://www.demodashi.com/demo/15006.html 效果预览 ### 一.需求 TableView多级列表:分级展开或合并,逐级获取并展示其子级数据,可以设 ...

随机推荐

  1. Java通用oracle和mysql数据库连接

    Java中oracle数据库连接写一个通用类UBUtil(){} import java.io.InputStream; import java.sql.*; import java.util.Pro ...

  2. DotNetty 跨平台的网络通信库

    长久以来,.Net开发人员都非常羡慕Java有Netty这样,高效,稳定又易用的网络通信基础框架.终于微软的Azure团队,使用C#实现的Netty的版本发布.不但使用了C#和.Net平台的技术特点, ...

  3. lucene介绍

    1.https://blog.csdn.net/shuaicihai/article/details/65111523 2.https://www.cnblogs.com/rodge-run/p/65 ...

  4. java将字符串存入GridF并通过id或文件名查询

    import static org.bson.codecs.configuration.CodecRegistries.fromProviders; import static org.bson.co ...

  5. HDU4292_Food

    给出一些人,一些食物,一些饮料,每个人都只喜欢喝某些饮料,吃某些食品,每个食品和饮料都有一定的数量,现在问最多能满足多少人的需求. 注意理解题意了,每个人只需要要拿一个食物和一个饮料即可,这题目说得好 ...

  6. 【大数据】MapTask并行度和切片机制

    一. MapTask并行度决定机制 maptask的并行度决定map阶段的任务处理并发度,进而影响到整个job的处理速度 那么,mapTask并行实例是否越多越好呢?其并行度又是如何决定呢? 1.1 ...

  7. BZOJ3267/3272 KC采花/Zgg吃东西（线段树）

    直接维护选k个子段时的最优解似乎也可以做,然而复杂度是O(nk2logn),显然跑不过. 考虑一种费用流做法.序列里每个点拆成入点和出点,源连入汇连出,入点和出点间连流量1费用ai的边,相邻点出点向入 ...

  8. Candies CodeForces - 991C（二分水题）

    就是二分暴力就好了 为什么要记下来 呵呵....emm你说为什么... 行吧 好吧 我一直以为我的二分出问题了 原来不是 依旧很帅 统计的时候求的减了多少次  然后用次数乘了mid 这样做会使那个人获 ...

  9. Alpha 冲刺 —— 十分之五

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 协助测试的进行 测试项目运行的服务器环境 ...

  10. BZOJ3836 [Poi2014]Tourism 【树形dp +状压dp】

    题目链接 BZOJ3836 题解 显然这是个\(NP\)完全问题,此题的解决全仗任意两点间不存在节点数超过10的简单路径的性质 这意味着什么呢? \(dfs\)树深度不超过\(10\) \(10\)很 ...