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. mongodb-$type、limit、skip、sort方法、索引、聚合

    一.$type操作符 $type操作符是基于BSON类型来检索集合中匹配的数据类型,并返回结果. MongoDB 中可以使用的类型如下表所示: 类型 数字 备注 Double 1   String 2 ...

  2. JAVA_Collection容器

    因为项目的需要,今天抽时间把JAVA中的容器复习了一下,为了以后的不时之需,现在把它记下来. 容器有其名,知其意,用来盛放数据的集合,JAVA中为我们提供了三种容器类:set.list.map,三种容 ...

  3. 工作单元模式(UnitOfWork)学习总结

    工作单元的目标是维护变化的对象列表.使用IUnitOfWorkRepository负责对象的持久化,使用IUnitOfWork收集变化的对象,并将变化的对象放到各自的增删改列表中, 最后Commit, ...

  4. 漫谈可视化Prefuse(二)---一分钟学会Prefuse

    前篇<漫谈可视化Prefuse(一)---从SQL Server数据库读取数据>主要介绍了prefuse如何连接数据库sql server并读取数据进行可视化展现. 回头想想还是应该好好捋 ...

  5. SQL Server 2014新特性——基数评估(白皮书阅读笔记)

    基数评估 目录 基数评估 说明 基数评估准确的重要性 模型假设 启用新的基数评估 验证基数评估的版本 在迁移到新的基数评估前要测试 校验基数评估 偏差问题 需要手动处理的变化 避免因为新的CE造成性能 ...

  6. 第1/24周 SQL Server 如何执行一个查询

    大家好,欢迎来到第1周的SQL Server性能调优培训.在我们进入SQL Server性能调优里枯燥难懂的细节内容之前,我想通过讲解SQL Server如何执行一个查询来建立基础.这个部分非常重要, ...

  7. 用原生JS读写CSS样式的方法总结

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了!   一.可以通过DOM节点对象的style对象(即CSSStyleDe ...

  8. 使用Graphviz绘图(一)

    前言 日常开发或者编写课程论文时,除了代码文档的编写,其中一个很重要的部分就是需要绘制流程图.示意图 绘制流程图有很多工具,一般常见的就有如下几种: Word.PPT等办公软件 Viso以及开源的Di ...

  9. 【转载】CSS Sticky Footer: 完美的CSS绝对底部

    下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. <div id="wrap&qu ...

  10. java继承的对象中构造函数的调用顺序

    建立两个继承关系的对象 public class Machine { public String machieNameString; public Machine() { System.out.pri ...