<!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. C语言中的strstr函数

    转自:http://www.cnblogs.com/xy-kidult/archive/2012/12/25/2832460.html 早上翻<C和指针>,碰见一个子串查找问题,这个问题在 ...

  2. 软工网络15团队作业8——Beta阶段项目总结

    1.新成员 姓名 风格 擅长 角色 宣言 李家俊 乱写 都有所涉猎 测试 混就完事了 丁树乐 潇洒 与人沟通 测试 与其临渊羡鱼,不如退而结网 2.是否需要更换团队的PM 不需要 3.下一阶段需要改进 ...

  3. HDU 2123 An easy problem

    http://acm.hdu.edu.cn/showproblem.php?pid=2123 Problem Description In this problem you need to make ...

  4. 使用docker-compose编排django、mysql实战

    背景: 本萌最近在部署自己开发的项目的时候发现同一套代码上传到服务器上后,部分功能莫名其妙的有点问题,服务器的各项配置都没有做过变动,所以想把项目转战到docker. 奈何刚接触docker,很多地方 ...

  5. java异常处理常见处理

    反例之一:丢弃异常结论一:既然捕获了异常,就要对它进行适当的处理.不要捕获异常之后又把它丢弃,不予理睬. 反例之二:不指定具体的异常 结论二:在catch语句中尽可能指定具体的异常类型,必要时使用多个 ...

  6. 关于svn和maven结合使用的讨论

    目前项目组在开发一个项目,由多个子模块构成,构建工具是maven,版本控制工具是svn.本文想对如何结合使用maven和svn提出一点初步的想法 一.只有svn的情况 首先考虑没有maven的情况.这 ...

  7. MachineLearning Exercise 4 ：Neural Networks Learning

    nnCostFunction 消耗公式: a1 = [ones(m,) X]; z2 = a1*Theta1'; pre = sigmoid(a1*Theta1'); a2 = [ones(m,) p ...

  8. GIT的使用方法

    GIT的使用方法 1.电脑首先安装GIT, 2.在官网注册GitHub账号. 一,使用git在控制台进行本地操作 1.打开GitBash 2.填写用户名和邮箱作为标识分别执行以下命令: git/ co ...

  9. 1.红黑树和自平衡二叉(查找)树区别 2.红黑树与B树的区别

    1.红黑树和自平衡二叉(查找)树区别 1.红黑树放弃了追求完全平衡,追求大致平衡,在与平衡二叉树的时间复杂度相差不大的情况下,保证每次插入最多只需要三次旋转就能达到平衡,实现起来也更为简单. 2.平衡 ...

  10. The Best Path HDU - 5883（欧拉回路 && 欧拉路径）

    The Best Path Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tot ...