<!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. angularJS1笔记-(4)-自定义服务

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. 封装GetQueryString()方法来获取URL的value值（转载）

    首先测试URL:http://192.168.1.82:8020/juzhong/daojishi.html?name=xiangruding&sex=nuuu&age=90 代码如下 ...

  3. mongodb授权认证 介绍

    mongodb存储所有的用户信息在admin 数据库的集合system.users中,保存用户名.密码和数据库信息.mongodb默认不启用授权认证,只要能连接到该服务器,就可连接到mongod.若要 ...

  4. Python3.6 AES加密 pycrypto‎ 更新为 pycrypto‎demo | TypeError: Object type <class 'str'> cannot be passed to C code

    #!/usr/bin/env python# -*- coding:utf-8 -*-# @author: rui.xu# @update: jt.huang# 这里使用pycrypto‎demo库# ...

  5. 初入码田--ASP.NET MVC4 Web应用之创建一个空白的MVC应用程序

    初入码田--ASP.NET MVC4 Web应用开发之一  实现简单的登录 初入码田--ASP.NET MVC4 Web应用开发之二 实现简单的增删改查 2016-07-29 在此之前,需要一台电脑( ...

  6. TFS(Team Foundation Server) 权限设置记录

    环境: TFS2012 + win7 1.安装好TFS 2.创建系统用户组: TFSAdmins.TFSDevs.TFSUsers 分别为TFS管理人员组.TFS开发人员组.TFS普通用户组. 如下图 ...

  7. c语言基本数据类型（short、int、long、char、float、double）

    一 C 语言包含的数据类型 short.int.long.char.float.double 这六个关键字代表C 语言里的六种基本数据类型. 在不同的系统上,这些类型占据的字节长度是不同的: 在32 ...

  8. Spring面试，IoC和AOP的理解, @Transactional原理及使用

    spring 的优点?1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实 ...

  9. oracle 11g 从 dmp 文件中导出 sql 代码 的方法.

    impdp sys/password full=y dumpfile=bg.dmp nologfile=y sqlfile=bg_dmp.sql 备注: bg.dmp 是 dmp 文件,   bg_d ...

  10. MT【153】缩小包围圈

    (清华2017.4.29标准学术能力测试3) 集合$S=\{1,2,\cdots,25\}$,$A\subseteq S$,且$A$ 的所有子集中元素之和不同．则下列选项正确的有(      ) A. ...