bootstrap-treeview.js1是一款强大的树菜单插件,本文演示bootstrap-treeview.js15种不同的调用方法。它可一次性加载数据,也可异步加载。支持Checkbox,selectable,节点级联等,而且还能承载大数据。

在线实例

实例演示

使用方法

演示一:默认
<div id="treeview1"></div>
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'] 
    }, 
];
$('#treeview1').treeview({ 
    data: defaultData 
});

  

参数详解

参数 描述 默认值
collapsed 初始化时的折叠状态 false
unique 展开同级节点的唯一性。true,当展开一个节点时,同级的其他节点会自动关闭;false,当展开一个节点时,同级的其他节点保持原形。 false
control 指定一个容器,控制整个tree的展开,收缩 或者收放 所有的节点。 -

treeview方法

toggle 当一个节点的收放状态改变时,调用自定义函数Callback。 toggle: function() {} -
add 追加节点。tree.treeview({     add: ''}); -

treeview bootstrap 多级下拉树的更多相关文章

  1. bootstrap多级下拉菜单

    只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...

  2. bootstrap 多级下拉菜单

    如上效果: 实现代码: 导入js和css: <link rel="stylesheet" href="http://cdn.static.runoob.com/li ...

  3. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

  4. zTree开发下拉树

    最近,因为工作需要一个树形下拉框的组件,经过查资料一般有两种的实现方法.其一,就是使用zTree实现:其二,就是使用easyUI实现.因为公司的前端不是使用easyUI设计的,故这里我选择了zTree ...

  5. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  6. 一款多浏览器兼容的javascript多级下拉菜单

    这个多级下拉菜单的脚本大小不到2K,带有动画效果,可以方便地支持多个实例,并且能良好兼容WordPress系统wp_list_cats和wp_list_pages生成的多级列表.要初始化一个菜单,只需 ...

  7. avalon.js 多级下拉框实现

    学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...

  8. 开源框架.netCore DncZeus学习(五)下拉树的实现

    千里之行,始于足下,先从一个小功能研究起,在菜单管理页面有一个下拉树,先研究下它怎么实现的 1.先找到menu.vue页面 惯性思维先搜索请选择三个字,原来是动态生成的 再向上找DropDown组件, ...

  9. Bootstrap按钮式下拉菜单

    前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...

随机推荐

  1. 在SSIS中的不同组件间使用局部临时表

    Connetion的属性RetainSameConnection是个boolean值,指定是否保持相同的链接,默认值是false,表示每个component都会单独的使用connection,在com ...

  2. SQL Pass北京举办第10次线下活动,欢迎报名

    活动主题: 探讨真实世界中的复制(第二季)与Windows Azure SQL Database内幕 地点:北京微软(中国)有限公司[望京利星行],三层308室 时间:2013年 9 月28日 13: ...

  3. [Qt5] How to connect c++ with QML

    Qt5处于过度阶段,架构繁琐,学习成本不低.尤其是UI代码竟然被重写,变了天. Qt中的c++可能是连接OPENCV与QML的一个不错的桥梁,在此学习这部分实用的技术. Reference: http ...

  4. ProGuard代码混淆技术详解

    前言     受<APP研发录>启发,里面讲到一名Android程序员,在工作一段时间后,会感觉到迷茫,想进阶的话接下去是看Android系统源码呢,还是每天继续做应用,毕竟每天都是画UI ...

  5. 列表视图(ListView和ListActivity)

    在ListView中显示网络图片 ImageView 类虽然有一个 setImageUri 方法,但不能直接接受一个由网络地址生成的uri作为参数从而显示图片,我们只好使用其 setImageBitm ...

  6. excel日期格式转换为文本格式

    今天测试读取excel并修改数据库数据的时候遇到几个小问题. 1.空指针,读写io异常蛮多的,获取不到的数据就是null 2.读取文件位置,开始找不到文件 3.读取日期格式结果是一个数值,因此需要转化 ...

  7. 使用Python将HTML转成PDF

    主要使用的是wkhtmltopdf的Python封装--pdfkit 安装 1. Install python-pdfkit: $ pip install pdfkit 2. Install wkht ...

  8. C#项目””是针对”.NETFramework,Version=v4.5.2”但此计算机没有,需要修改为v4.5.1.

    每次下载别人的代码都会出现这样的问题,以为是没有安装.NETFramework,就下载安装了,但是每次安装都会出现已安装高版本的4.6(Win10自带),无需下次安装,但是每次VS中都会显示有问题,而 ...

  9. 【转载】MVC使用HandleErrorAttribute自定义异常

    本文导读:在ASP.NET MVC中,可以使用HandleErrorAttribute特性来具体指定如何处理Action抛出的异常.只要某个Action设置了HandleErrorAttribute特 ...

  10. DataTable转换为List<T>或者DataRow转换为T

    这段时间开发ASP.NETMVC应用程序,从数据库获取数据之后,需要把记录转换为数据集在视图中显示.我们需要把DataTable转换为List<T>或者DataRow转换为T. 本篇中可以 ...