bootstrap-treeview_xiaoyushiying的博客-程序员秘密

技术标签： 前端框架  tree  bootstrap  

bootstrap-treeview

简要教程

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。

bootstrap列表树示意图

 插件依赖

  • Bootstrap v3.0.3
  • jQuery v2.0.3

以上两个外部依赖文件已经经过测试可以正常使用，其他版本的Bootstrap需要另行测试。该插件不支持bootstrap 2。

 使用方法

首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。

<!-- Required Stylesheets -->
< link   href = "./css/bootstrap.css"   rel = "stylesheet" >
 
<!-- Required Javascript -->
< script   src = "./js/jquery.js" ></ script >
< script   src = "./js/bootstrap-treeview.js" ></ script >                 
 HTML结构

可以使用任何HTML DOM元素来作为该列表树的容器：

< div   id = "tree" ></ div >                 
 调用插件

该列表树插件最基本的调用方法如下：

function   getTree() {
     // Some logic to retrieve, or generate tree structure
     return   data;
}
 
$( '#tree' ).treeview({data: getTree()});                 

 数据结构

为了创建树的继承结构，需要为该列表树插件提供一个嵌套结构的js对象。例如：

var   tree = [
   {
     text: "Parent 1" ,
     nodes: [
       {
         text: "Child 1" ,
         nodes: [
           {
             text: "Grandchild 1"
           },
           {
             text: "Grandchild 2"
           }
         ]
       },
       {
         text: "Child 2"
       }
     ]
   },
   {
     text: "Parent 2"
   },
   {
     text: "Parent 3"
   },
   {
     text: "Parent 4"
   },
   {
     text: "Parent 5"
   }
];                 

最简单的树结构可以只有一个节点，使用一个带text属性的js对象来实现即可：

{
     text: "Node 1"
}                 

如果你需要自定义更多的内容，可以参考下面：

{
   text: "Node 1" ,
   icon: "glyphicon glyphicon-stop" ,
   selectedIcon: "glyphicon glyphicon-stop" ,
   color: "#000000" ,
   backColor: "#FFFFFF" ,
   href: "#node-1" ,
   selectable: true ,
   state: {
     checked: true ,
     disabled: true ,
     expanded: true ,
     selected: true
   },
   tags: [ 'available' ],
   nodes: [
     {},
     ...
   ]
.......//可以扩展属性
}                

 节点属性

下面的参数可用于树节点的属性定义，如节点的文本、颜色和标签等。

参数名称 参数类型 参数描述
text String(必选项) 列表树节点上的文本，通常是节点右边的小图标。
icon String(可选项) 列表树节点上的图标，通常是节点左边的图标。
selectedIcon String(可选项) 当某个节点被选择后显示的图标，通常是节点左边的图标。
href String(可选项) 结合全局enableLinks选项为列表树节点指定URL。
selectable Boolean. Default: true 指定列表树的节点是否可选择。设置为false将使节点展开，并且不能被选择。
state Object(可选项) 一个节点的初始状态。
state.checked Boolean，默认值false 指示一个节点是否处于checked状态，用一个checkbox图标表示。
state.disabled Boolean，默认值false 指示一个节点是否处于disabled状态。（不是selectable，expandable或checkable）
state.expanded Boolean，默认值false 指示一个节点是否处于展开状态。
state.selected Boolean，默认值false 指示一个节点是否可以被选择。
color String. Optional 节点的前景色，覆盖全局的前景色选项。
backColor String. Optional 节点的背景色，覆盖全局的背景色选项。
tags Array of Strings. Optional 通过结合全局showTags选项来在列表树节点的右边添加额外的信息。

 全局参数

参数可以定制treeview的默认外观和行为。参数使用一个对象来在插件初始化时传入：

// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$( '#tree' ).treeview({
   data: data,         // data is not optional
   levels: 5,
   backColor: 'green'
});                 
参数名称 参数类型 默认值 描述
data Array of Objects 无 列表树上显示的数据。
backColor String 所有合法的颜色值，Default: inherits from Bootstrap.css。 设置所有列表树节点的背景颜色。
borderColor String 所有合法的颜色值，Default: inherits from Bootstrap.css。 设置列表树容器的边框颜色，如果不想要边框可以设置showBorder属性为false。
checkedIcon String：class名称 Bootstrap Glyphicons定义的 "glyphicon glyphicon-check" 设置处于checked状态的复选框图标。
collapseIcon String：class名称 Bootstrap Glyphicons定义的 "glyphicon glyphicon-minus" 设置列表树可收缩节点的图标。
color String 所有合法的颜色值，Default: inherits from Bootstrap.css。 设置列表树所有节点的前景色。
emptyIcon String：class名称 Bootstrap Glyphicons定义的"glyphicon"。 设置列表树中没有子节点的节点的图标。
enableLinks Boolean false 是否使用当前节点的文本作为超链接。超链接的href值必须在每个节点的data结构中给出。
expandIcon String：class名称 Bootstrap Glyphicons定义的 "glyphicon glyphicon-plus" 设置列表树可展开节点的图标。
highlightSearchResults Boolean true 是否高亮搜索结果。
highlightSelected Boolean true 当选择节点时是否高亮显示。
onhoverColor String 所有合法的颜色值， Default: '#F5F5F5'。 设置列表树的节点在用户鼠标滑过时的背景颜色。
levels Integer Default: 2 设置继承树默认展开的级别。
multiSelect Boolean false 是否可以同时选择多个节点。
nodeIcon String：class名称 Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop" 设置所有列表树节点上的默认图标。
selectedIcon String：class名称 Bootstrap Glyphicons定义的 "glyphicon glyphicon-stop" 设置所有被选择的节点上的默认图标。
searchResultBackColor String 所有合法的颜色值， Default: undefined, inherits。 设置搜索结果节点的背景颜色。
searchResultColor String 所有合法的颜色值， Default: '#D9534F' 设置搜索结果节点的前景颜色。
selectedBackColor String 所有合法的颜色值， Default: '#428bca' 设置被选择节点的背景颜色。
selectedColor String 所有合法的颜色值， Default: '#FFFFFF'。 设置列表树选择节点的背景颜色。
showBorder Boolean true 是否在节点上显示边框。
showCheckbox Boolean false 是否在节点上显示checkboxes。
showIcon Boolean true 是否显示节点图标。
showTags Boolean false 是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出。
uncheckedIcon String：class名称 Bootstrap Glyphicons定义的 "glyphicon glyphicon-unchecked" 设置图标为未选择状态的checkbox图标。

 可用方法

你可以通过两种方式来调用方法：

  • 1、插件包装器：插件的包装器可以作为访问底层方法的代理。
    $( '#tree' ).treeview( 'methodName' , args) 

    多个参数必须使用数组对象来传入。

  • 2、直接使用treeview：你可以通过下面两种方法中的一种来获取treeview对象实例。
    //该方法返回一个treeview的对象实例
    $( '#tree' ).treeview( true )
       .methodName(args);
     
    //对象实例也保存在DOM元素的data中，
    //可以使用'treeview'的id来访问它。
    $( '#tree' ).data( 'treeview' )
       .methodName(args); 
 treeview方法列表
  • checkAll(options)：选择所有的节点。
    $( '#tree' ).treeview( 'checkAll' , { silent: true   });

    触发nodeChecked事件，传入silent来阻止其它事件。

  • checkNode(node | nodeId, options)：选择指定的节点，接收节点或节点ID。
    $( '#tree' ).treeview( 'checkNode' , [ nodeId, { silent: true   } ]);

    触发nodeChecked事件，传入silent来阻止其它事件。

  • clearSearch()：清空以前的搜索结果。例如清除它们的高亮状态。
    $( '#tree' ).treeview( 'clearSearch' );

    触发searchCleared事件。

  • collapseAll(options)：折叠所有的节点，折叠整个树。
    $( '#tree' ).treeview( 'collapseAll' , { silent: true   });

    触发nodeCollapsed事件，传入silent来阻止其它事件。

  • collapseNode(node | nodeId, options)：折叠指定节点和它的子节点。如果不想折叠子节点，可以设置{ ignoreChildren: true }。
    $( '#tree' ).treeview( 'collapseNode' , [ nodeId, { silent: true , ignoreChildren: false   } ]);

    触发nodeCollapsed事件，传入silent来阻止其它事件。

  • disableAll(options)：禁用所有的节点。
    $( '#tree' ).treeview( 'disableAll' , { silent: true   });

    触发nodeDisabled事件，传入silent来阻止其它事件。

  • disableNode(node | nodeId, options)：禁用指定的节点，接收节点或节点ID。
    $( '#tree' ).treeview( 'disableNode' , [ nodeId, { silent: true   } ]);

    触发nodeDisabled事件，传入silent来阻止其它事件。

  • enableAll(options)：启用所有的节点。
    $( '#tree' ).treeview( 'enableAll' , { silent: true   });

    触发nodeEnabled事件，传入silent来阻止其它事件。

  • enableNode(node | nodeId, options)：启用指定的节点，接收节点或节点ID。
    $( '#tree' ).treeview( 'enableNode' , [ nodeId, { silent: true   } ]);

    触发nodeEnabled事件，传入silent来阻止其它事件。

  • expandAll(options)：展开所有的树节点。也可以展开任何给定级别的树节点。
    $( '#tree' ).treeview( 'expandAll' , { levels: 2, silent: true   });

    触发nodeExpanded事件，传入silent来阻止其它事件。

  • expandNode(node | nodeId, options)：展开指定的树节点，接收节点或节点ID。也可以展开任何给定级别的树节点。
    $( '#tree' ).treeview( 'expandNode' , [ nodeId, { levels: 2, silent: true   } ]);

    触发nodeExpanded事件，传入silent来阻止其它事件。

  • getCollapsed()：返回折叠节点的数组。例如state.expanded = false。
    $( '#tree' ).treeview( 'getCollapsed' , nodeId);
  • getDisabled()：返回被禁用节点的数组。
    $( '#tree' ).treeview( 'getDisabled' , nodeId);
  • getEnabled()：返回可用节点的数组。
    $( '#tree' ).treeview( 'getEnabled' , nodeId);
  • getExpanded()：返回所有展开节点的数组。
    $( '#tree' ).treeview( 'getExpanded' , nodeId);
  • getNode(nodeId)：返回给定节点ID的单一节点对象。
    $( '#tree' ).treeview( 'getNode' , nodeId);
  • getParent(node | nodeId)：返回给定节点的父节点，如果没有则返回undefined。
    $( '#tree' ).treeview( 'getParent' , node);
  • getSelected()：返回所有被选择节点的数组，例如：state.selected = true。
    $( '#tree' ).treeview( 'getSelected' , nodeId);
  • getSiblings(node | nodeId)：返回给定节点的兄弟节点的数组，如果没有则返回undefined。
    $( '#tree' ).treeview( 'getSiblings' , node);
  • getUnselected()：返回没有被选择节点的数组。例如：state.selected = false。
    $( '#tree' ).treeview( 'getUnselected' , nodeId);
  • remove()：移除列表树容器。移除附加的事件、附加对象和额外的html元素。
    $( '#tree' ).treeview( 'remove' );
  • revealNode(node | nodeId, options)：显示一个树节点，展开从这个节点开始到根节点的所有节点。
    $( '#tree' ).treeview( 'revealNode' , [ nodeId, { silent: true   } ]);

    触发nodeExpanded事件，传入silent来阻止其它事件。

  • search(pattern, options)：搜索匹配是非常的指定树节点，并高亮它们。返回配平节点的数组。
    $( '#tree' ).treeview( 'search' , [ 'Parent' , {
       ignoreCase: true ,     // case insensitive
       exactMatch: false ,    // like or equals
       revealResults: true ,  // reveal matching nodes
    }]);
    $('##tree').treeview('search', [ value,{ ignoreCase: false, exactMatch: false },attr]);
    value:值，
    attr:需要查询的属性

    触发searchComplete事件。

  • selectNode(node | nodeId, options)：选择一个给定的树节点，接收节点或节点ID。
    $( '#tree' ).treeview( 'selectNode' , [ nodeId, { silent: true   } ]);

    触发nodeSelected事件，传入silent来阻止其它事件。

  • toggleNodeChecked(node | nodeId, options)：切换节点的Check状态。
    $( '#tree' ).treeview( 'toggleNodeChecked' , [ nodeId, { silent: true   } ]);

    触发nodeChecked事件或nodeUnchecked事件，传入silent来阻止其它事件。

  • toggleNodeDisabled(node | nodeId, options)：切换一个节点的可用和不可用状态。
    $( '#tree' ).treeview( 'toggleNodeDisabled' , [ nodeId, { silent: true   } ]);

    触发nodeDisabled事件或nodeEnabled事件，传入silent来阻止其它事件。

  • toggleNodeExpanded(node | nodeId, options)：切换一个节点的展开和折叠状态。
    $( '#tree' ).treeview( 'toggleNodeExpanded' , [ nodeId, { silent: true   } ]);

    触发nodeExpanded事件或nodeCollapsed事件，传入silent来阻止其它事件。

  • toggleNodeSelected(node | nodeId, options)：切换一个节点的选择状态。
    $( '#tree' ).treeview( 'toggleNodeSelected' , [ nodeId, { silent: true   } ]);

    触发nodeSelected事件或nodeUnselected事件，传入silent来阻止其它事件。

  • uncheckAll(options)：Uncheck所有的节点。
    $( '#tree' ).treeview( 'uncheckAll' , { silent: true   });

    触发nodeUnchecked事件，传入silent来阻止其它事件。

  • uncheckNode(node | nodeId, options)：Uncheck一个给定的节点，接收节点或节点ID。
    $( '#tree' ).treeview( 'uncheckNode' , [ nodeId, { silent: true   } ]);

    触发nodeUnchecked事件，传入silent来阻止其它事件。

  • unselectNode(node | nodeId, options)：不选择指定的节点，接收节点或节点ID。
    $( '#tree' ).treeview( 'unselectNode' , [ nodeId, { silent: true   } ]);

    触发nodeUnselected事件，传入silent来阻止其它事件。

 事件

你可以在参数中使用回调函数来绑定任何事件，或者使用标准的jQuery .on()方法来绑定事件。

在参数中调用的示例：

$( '#tree' ).treeview({
   // The naming convention for callback's is to prepend with `on`
   // and capitalize the first letter of the event name
   // e.g. nodeSelected -> onNodeSelected
   onNodeSelected: function (event, data) {
     // 事件代码...
});               

使用jQuery .on方法：

$( '#tree' ).on( 'nodeSelected' , function (event, data) {
   // 事件代码...
});               
 可用事件列表
  • nodeChecked (event, node)：一个节点被checked。
  • nodeCollapsed (event, node)：一个节点被折叠。
  • nodeDisabled (event, node)：一个节点被禁用。
  • nodeEnabled (event, node)：一个节点被启用。
  • nodeExpanded (event, node)：一个节点被展开。
  • nodeSelected (event, node)：一个节点被选择。
  • nodeUnchecked (event, node)：一个节点被unchecked。
  • nodeUnselected (event, node)：取消选择一个节点。
  • searchComplete (event, results)：搜索完成之后触发。
  • searchCleared (event, results)：搜索结果被清除之后触发。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyushiying/article/details/52053127

智能推荐

python版AI贪吃蛇_alpine上贪吃蛇_学AI的石头的博客-程序员秘密

本文转自：https://mp.weixin.qq.com/s?__biz=MzU2NDI1MjkwNA==&amp;amp;mid=2247484020&amp;amp;idx=1&amp;amp;sn=73aa1452ddba05ae233e3e4a3aaa2ad6&amp;amp;chksm=fc4c9bf3cb3b12e5877f0bfc64c819bf7ffc302d1ad473ed3bea618cc923e978c...

java面试突击第一季 github,Github接近10w点赞！Java面试必备开源指南_BioArt生物艺术的博客-程序员秘密

距离最近的 V3.0 版本的发布，已经过去快 6 个月了。在这漫长的 6 个月，有很多读者通过邮件/issue/pr等方式指出了《JavaGuide 面试突击》v3.0 存在的一些问题。炒鸡感谢！爱你们！我记得有一个读者在微信给我提了某个地方的表述可以完善的建议，但是我后面一忙就给忘了，找了半天也没找到对应的消息记录。在这里给这位读者说声抱歉。想着有很多小伙伴要准备春招或者即将跳槽，所以，还是...

Uni-app页面组成_uniapp 页面结构_不足为害的博客-程序员秘密

Uni-appuni-app目录结构在新建uni-app时默认包含如下的目录及文件：components 用来存放uni-app组件的目录pages 用来存放整个uni-app所有的页面 例如：index.vuestatic 用来存放一些静态图片 例如：图片、图标、视频等。静态资源只能存放于此。App.vue 是用来配置App全局样式，是页面的入口文件，可以调用应用的生命周期函数。...

微信公众平台开发教程--自定义菜单_weixin_33852020的博客-程序员秘密

微信公众平台开发教程（五）自定义菜单请尊重作者版权，如需转载，请标明出处。应大家强烈要求，将自定义菜单功能课程提前。一、概述：如果只有输入框，可能太简单，感觉像命令行。自定义菜单，给我们提供了很大的灵活性，更符合用户的操作习惯。在一个小小的微信对话页面，可以实现更多的功能。菜单直观明了，不仅能提供事件响应，还支持URL跳转，如果需要的功能比较复杂，我们大可以使用URL跳转，跳转至我们的网页...

secureCRT使用VIM时对语法高亮_孤剑的博客-程序员秘密

1.在SecureCRT中 secureCRT使用VIM时对语法高亮 其实不是secureCRT的功能，而是VIM的设置：Options ->Session Options -> Terminal -> Emulation 中Terminal选择ANSI or linux or xterm,必须钩上 ANSI Colour设置 选项->会话选项->终端->仿真->终端：Linux，选中ANSI C

C#基础-----狗剩整理软件面试_wei198621的博客-程序员秘密

基础部分  1.OSI七层参考模型的名称？     (LEO) 应用、表示、会话、传输、网络、数据链路、物理。2.UDP连接和TCP连接有何异同？(LEO)UDP不精确用于视频等，TCP精确的要验证的，OSI 和 TCP/Ip 模型在传输层定义两种传输协议：TCP（或传输控制协议）和 UDP（或用户数据报协议）。 UDP     UDP 与 TCP 的主要区别在于 U

随便推点

周志华《机器学习》同步学习笔记 ——第十章降维与度量学习_高纬空间低纬嵌入_克小洛的博客-程序员秘密

周志华《机器学习》同步学习笔记 ——第十章降维与度量学习10.1 k近邻学习10.2 低纬嵌入10.3 主成分分析10.4 核化线性降维10.5 流形学习10.6 度量学习10.1 k近邻学习k近邻学习即kNN（k-Nearest Neighbor）是一种常用的监督学习方法：给定某个测试样本，基于某种距离度量在训练集中找出与其距离最近的k个带有真实标记的训练样本，然后给基于这k个邻居的真实标记...

关于 parseInt 的一道有意思的面试题_[] parseint面试题_zk65645的博客-程序员秘密

看完标题，入坑过的同学脑海里很快会浮现出这道经典面试题，没碰到过的同学不妨跟着楼主先来复习一遍 parseInt 的用法（主要参考 MDN）。parseInt 是 JavaScript 中的一个全局函数（顶级函数），它会将给定的字符串以指定基数（radix/base）解析成为整数。它的语法非常简单：parseInt(string, radix)第一个参数 string 是要

微信会偷看聊天记录吗？张小龙万字演讲回应一切！新表情、输入法、直播拜年都要来了！信息量太大（附全文）..._程序员小乐的博客-程序员秘密

点击上方 &#34;编程技术圈&#34;关注,星标或置顶一起成长后台回复“大礼包”有惊喜礼包！每日英文If you’re brave to say “good bye”, life w...

android第三方图表库,Android实际开发中实用的第三方（开源）框架_大菠萝盖的博客-程序员秘密

以下是个人实际开发中经常用到的开源框架，后续会持续更新…1.Butterknife将Android视图和回调绑定到字段和方法https://github.com/JakeWharton/butterknife2.Material – dialogs一个漂亮，流畅且可自定义的对话框APIhttps://github.com/afollestad/material-dialogs3.BaseRecyc...

一文教你认清领域模型和数据模型_领域模型 数据模型_张建飞（Frank）的博客-程序员秘密

依稀记得我第一次设计一个系统的时候，画了一堆UML图，面对Class Diagram（其实就是领域模型），纠结了好久，不知道如何落地。因为，如果按照这个类图去落数据库的话，看起来很奇怪，有点繁琐。可是不按照这个类图落库的话，又不知道这个类图画了有什么用。现在回想起来，我当时的纠结源自于我对领域模型和数据模型这两个重要概念的不清楚。最近，我发现对这两个概念的混淆不是个例，而是非常普遍的现象。其结果就是，小到会影响一些模块设计的不合理性，大到会影响像业务中台这样重大技术决策，因为如果底层的逻辑、概念、理论基础

ANNOVAR的使用笔记1_weixin_30596023的博客-程序员秘密

#########The latest version of ANNOVAR (2017Jul16)(/opt/tools/annovar)ANNOVAR 注释软件 (https://www.plob.org/article/9976.html)http://annovar.openbioinformatics.org/en/latest/user-guide/startup/#ta...

推荐文章

热门文章

相关标签