Twitter Bootstrap的树视图 - Bootstrap Tree View http://jonmiles.github.io/bootstrap-treeview/
Bootstrap树视图
一个简单而优雅的解决方案，可以显示分层树结构（即树视图），同时利用Twitter Bootstrap提供的最佳功能。
依赖
如果提供这些是实际版本bootstrap-treeview已经过测试。
入门
安装
您可以使用凉亭安装（推荐）：
$ bower安装bootstrap - treeview
或使用npm：
$ npm install bootstrap - treeview
或手动下载。
用法
添加以下资源以使bootstrap-treeview正常运行。
<！ -必需的样式表- >
< link href = “ bootstrap.css ” rel = “ stylesheet ” >
<！ -必需的Javascript - >
< script src = “ jquery.js ” > </ script >
< script src = “ bootstrap-treeview.js ” > </ script >
该组件将绑定到任何现有的DOM元素。
< div id = “ tree ” > </ div >
基本用法可能看起来像这样。
function getTree（）{
//一些用于检索或生成树结构
返回数据的逻辑 ;
}
$（'＃tree '）。treeview（{data ： getTree（）}）;
数据结构
为了定义树所需的层次结构，有必要提供嵌套的JavaScript对象数组。
例
var tree = [
{
文字： “父1 ”，
节点： [
{
文字： “孩子1 ”，
节点： [
{
文字： “孙子1 ”
}，
{
文字： “孙子2 ”
}
]
}，
{
文字： “孩子2 ”
}
]
}，
{
文字： “父母2 ”
}，
{
文字： “父母3 ”
}，
{
文字： “父母4 ”
}，
{
文字： “父母5 ”
}
]。
在最低级别，树节点表示为简单的JavaScript对象。这个必需属性text将为您构建一棵树。
{
文字： “节点1 ”
}
如果您想要做更多，这是完整的节点规范
{
文字： “节点1 ”，
图标： “ glyphicon glyphicon-stop ”，
selectedIcon ： “ glyphicon glyphicon-stop ”，
颜色： “＃000000 ”，
backColor ： “ #FFFFFF ”，
href ： “＃node-1 ”，
可选： 真的，
州： {
检查： 是的，
禁用： 是的，
扩展： 是的，
选中： 是的
}，
标签： [ ' available ' ]，
节点： [
{}，
...
]
}
节点属性
定义以下属性以允许节点级别覆盖，例如节点特定图标，颜色和标记。
文本
String Mandatory
显示给定树节点的文本值，通常位于节点图标的右侧。
图标
String Optional
显示在给定节点上的图标，通常位于文本的左侧。
为简单起见，我们直接利用Bootstraps Glyphicons支持，因此您应该提供由空格分隔的基类和单个图标类。
通过提供基类，您可以完全控制所使用的图标。如果您想使用自己的，只需将您的类添加到此图标字段。
selectedIcon
String Optional
选中时在给定节点上显示的图标，通常位于文本的左侧。
颜色
String Optional
给定节点上使用的前景色会覆盖全局颜色选项。
背景色
String Optional
给定节点上使用的背景颜色将覆盖全局颜色选项。
HREF
String Optional
与全局enableLinks选项结合使用，以指定给定节点上的锚标记URL。
可选
Boolean Default: true
是否可以在树中选择节点。False表示节点应作为扩展标题，不会触发选择事件。
州
Object Optional 描述节点的初始状态。
state.checked
Boolean Default: false
是否检查节点，由复选框样式glyphicon表示。
state.disabled
Boolean Default: false
是否禁用节点（不可选择，可扩展或可检查）。
state.expanded
Boolean Default: false
是否扩展节点即打开。优先于全局选项级别。
state.selected
Boolean Default: false
是否选择了节点。
标签
Array of Strings Optional
与全局showTags选项一起使用，以在每个节点的右侧添加其他信息; 使用Bootstrap徽章
可扩展
您可以通过添加应用程序所需的任意数量的其他键值对来扩展节点对象。请记住，这是在选择事件期间传递的对象。
选项
选项允许您自定义树视图的默认外观和行为。它们在初始化时作为对象传递给插件。
//示例：初始化树视图
//扩展到5个级别
//背景颜色为绿色
$（ ' #tree '）。treeview（{
数据：数据， //数据不是可选
级别： 5，
backColor ： ' green '
}）;
您可以随时将新选项对象传递给树视图，但这会重新初始化树视图。
选项列表
以下是所有可用选项的列表。
数据
对象数组。没有默认值，期望数据
这是树视图要显示的核心数据。
背景色
字符串，任何合法的颜色值。默认值：从Bootstrap.css继承。
设置所有节点使用的默认背景颜色，除非在数据中基于每个节点覆盖。
边框颜色
字符串，任何合法的颜色值。默认值：从Bootstrap.css继承。
设置组件的边框颜色; 如果您不想要可见边框，请将showBorder设置为false。
checkedIcon
字符串，类名。默认值：Bootstrap Glyphicons定义的“glyphicon glyphicon-check”
将图标设置为选中复选框，与showCheckbox结合使用。
collapseIcon
字符串，类名。默认值：Bootstrap Glyphicons定义的“glyphicon glyphicon-minus”
设置要在可折叠树节点上使用的图标。
颜色
字符串，任何合法的颜色值。默认值：从Bootstrap.css继承。
设置所有节点使用的默认前景色，除非在数据中基于每个节点覆盖。
emptyIcon
字符串，类名。默认值：Bootstrap Glyphicons定义的“glyphicon”
设置要在没有子节点的树节点上使用的图标。
enableLinks
布尔。默认值：false
是否将节点文本显示为超链接。必须在每个节点的数据结构中提供其href值。
expandIcon
字符串，类名。默认值：Bootstrap Glyphicons定义的“glyphicon glyphicon-plus”
设置要在可扩展树节点上使用的图标。
highlightSearchResults
布尔。默认值：true
是否突出显示搜索结果。
highlightSelected
布尔。默认值：true
是否突出显示所选节点。
水平
整数。默认值：2
设置默认情况下树将扩展到的层次级别数。
多选
布尔。默认值：false
是否可以同时选择多个节点。
nodeIcon
字符串，类名。默认值：Bootstrap Glyphicons定义的“glyphicon glyphicon-stop”
设置要在所有节点上使用的默认图标，除非在数据中基于每个节点覆盖。
onhoverColor
字符串，任何合法的颜色值。默认值：'＃F5F5F5'。
设置用户光标悬停在节点上时激活的默认背景颜色。
selectedIcon
字符串，类名。默认值：Bootstrap Glyphicons定义的“glyphicon glyphicon-stop”
设置要在所有选定节点上使用的默认图标，除非在数据中基于每个节点覆盖。
searchResultBackColor
字符串，任何合法的颜色值。默认值：undefined，继承。
设置所选节点的背景颜色。
searchResultColor
字符串，任何合法的颜色值。默认值：'＃D9534F'。
设置所选节点的前景色。
selectedBackColor
字符串，任何合法的颜色值。默认值：'＃428bca'。
设置所选节点的背景颜色。
selectedColor
字符串，任何合法的颜色值。默认值：'#FFFFFF'。
设置所选节点的前景色。
showBorder
布尔。默认值：true
是否在节点周围显示边框。
showCheckbox
布尔。默认值：false
是否在节点上显示复选框。
showIcon
布尔。默认值：true
是否显示节点图标。
showTags
布尔。默认值：false
是否在每个节点的右侧显示标签。必须在每个节点的数据结构中提供其值。
uncheckedIcon
字符串，类名。默认值：Bootstrap Glyphicons定义的“glyphicon glyphicon-unchecked”
将图标设置为未选中复选框，与showCheckbox结合使用。
方法
方法提供了一种以编程方式与插件交互的方法。例如，可以通过expandNode方法扩展节点。
您可以使用以下两种方法之一调用方法：
1.插件的包装器
插件的包装器用作访问底层方法的代理。
$（'＃tree '）。treeview（' methodName '，args）
限制，多个参数必须作为参数数组传递。
2.树视图直接
您可以使用以下两种方法之一获取树视图的实例。
//此特殊方法返回树视图的实例。
$（ '＃tree '）。treeview（ true）
。methodName（args）;
//实例也保存在DOM元素数据中，
//可以使用插件的id“treeview”访问。
$（ '＃tree '）。数据（ ' treeview '）
。methodName（args）;
如果您计划大量互动，那么这是一种更好的方法。
方法清单
以下是所有可用方法的列表。
checkAll（选项）
检查所有树节点
$（'＃tree '）。treeview（' checkAll '，{silent ： true }）;
触发nodeChecked事件; 通过沉默来压制事件。
checkNode（node | nodeId，options）
检查给定的树节点，接受node或nodeId。
$（'＃tree '）。treeview（' checkNode '，[nodeId，{silent ： true }]）;
触发nodeChecked事件; 通过沉默来压制事件。
clearSearch（）
清除任何先前搜索结果的树视图，例如删除其突出显示的状态。
$（'＃tree '）。treeview（' clearSearch '）;
触发searchCleared事件
collapseAll（选项）
折叠所有树节点，折叠整个树。
$（'＃tree '）。treeview（' collapseAll '，{silent ： true }）;
触发nodeCollapsed事件; 通过沉默来压制事件。
collapseNode（node | nodeId，options）
折叠给定的树节点及其子节点。如果您不想折叠子节点，请传递选项{ ignoreChildren: true }。
$（'＃tree '）。treeview（' collapseNode '，[nodeId，{silent ： true，ignoreChildren ： false }]）;
触发nodeCollapsed事件; 通过沉默来压制事件。
disableAll（选项）
禁用所有树节点
$（'＃tree '）。treeview（' disableAll '，{silent ： true }）;
触发nodeDisabled事件; 通过沉默来压制事件。
disableNode（node | nodeId，options）
禁用给定的树节点，接受节点或nodeId。
$（'＃tree '）。treeview（' disableNode '，[nodeId，{silent ： true }]）;
触发nodeDisabled事件; 通过沉默来压制事件。
enableAll（选项）
启用所有树节点
$（'＃tree '）。treeview（' enableAll '，{silent ： true }）;
触发nodeEnabled事件; 通过沉默来压制事件。
enableNode（node | nodeId，options）
启用给定树节点，接受节点或nodeId。
$（'＃tree '）。treeview（' enableNode '，[nodeId，{silent ： true }]）;
触发nodeEnabled事件; 通过沉默来压制事件。
expandAll（选项）
展开所有树节点。可选地，可以扩展到任何给定数量的级别。
$（'＃tree '）。treeview（' expandAll '，{levels ： 2，silent ： true }）;
触发nodeExpanded事件; 通过沉默来压制事件。
expandNode（node | nodeId，options）
展开给定的树节点，接受node或nodeId。可选地，可以扩展到任何给定数量的级别。
$（'＃tree '）。treeview（' expandNode '，[nodeId，{levels ： 2，silent ： true }]）;
触发nodeExpanded事件; 通过沉默来压制事件。
getCollapsed（）
返回折叠节点的数组，例如state.expanded = false。
$（'＃tree '）。树视图（' getCollapsed '，节点ID）;
getDisabled（）
返回已禁用节点的数组，例如state.disabled = true。
$（'＃tree '）。treeview（' getDisabled '，nodeId）;
getEnabled（）
返回已启用节点的数组，例如state.disabled = false。
$（'＃tree '）。treeview（' getEnabled '，nodeId）;
getExpanded（）
返回展开节点的数组，例如state.expanded = true。
$（'＃tree '）。treeview（' getExpanded '，nodeId）;
getNode（节点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 '，节点）;
getUnselected（）
返回未选定节点的数组，例如state.selected = false。
$（'＃tree '）。treeview（' getUnselected '，nodeId）;
去掉（）
删除树视图组件。删除附加事件，内部附加对象和添加的HTML元素。
$（'＃tree '）。treeview（'删除'）;
revealNode（node | nodeId，options）
显示给定的树节点，将树从节点扩展到根。
$（'＃tree '）。treeview（' revealNode '，[nodeId，{silent ： true }]）;
触发nodeExpanded事件; 通过沉默来压制事件。
搜索（模式，选项）
在树视图中搜索与给定字符串匹配的节点，并在树中突出显示它们。
返回匹配节点的数组。
$（'＃tree '）。treeview（' search '，[ ' Parent '，{
ignoreCase ： true， //不区分大小写的
exactMatch ： false， // like或equals
revealResults ： true， //显示匹配的节点
}]）;
触发searchComplete事件
selectNode（node | nodeId，options）
选择给定的树节点，接受节点或nodeId。
$（'＃tree '）。treeview（' selectNode '，[nodeId，{silent ： true }]）;
触发nodeSelected事件; 通过沉默来压制事件。
toggleNodeChecked（node | nodeId，options）
切换节点检查状态; 检查是否未选中，如果选中则取消选中。
$（'＃tree '）。treeview（' toggleNodeChecked '，[nodeId，{silent ： true }]）;
触发任一nodeChecked或nodeUnchecked事件; 通过沉默来压制事件。
toggleNodeDisabled（node | nodeId，options）
切换节点禁用状态; 如果启用则禁用，如果禁用则启用。
$（'＃tree '）。treeview（' toggleNodeDisabled '，[nodeId，{silent ： true }]）;
触发任一nodeDisabled或nodeEnabled事件; 通过沉默来压制事件。
toggleNodeExpanded（node | nodeId，options）
切换节点扩展状态; 如果展开则折叠，折叠时展开。
$（'＃tree '）。treeview（' toggleNodeExpanded '，[nodeId，{silent ： true }]）;
触发任一nodeExpanded或nodeCollapsed事件; 通过沉默来压制事件。
toggleNodeSelected（node | nodeId，options）
切换节点选择状态; 选择是否未选中，如果选择则取消选择。
$（'＃tree '）。treeview（' toggleNodeSelected '，[nodeId，{silent ： true }]）;
触发任一nodeSelected或nodeUnselected事件; 通过沉默来压制事件。
uncheckAll（选项）
取消选中所有树节点。
$（'＃tree '）。treeview（' uncheckAll '，{silent ： true }）;
触发nodeUnchecked事件; 通过沉默来压制事件。
uncheckNode（node | nodeId，options）
取消选中给定的树节点，接受node或nodeId。
$（'＃tree '）。treeview（' uncheckNode '，[nodeId，{silent ： true }]）;
触发nodeUnchecked事件; 通过沉默来压制事件。
unselectNode（node | nodeId，options）
取消选择给定的树节点，接受节点或nodeId。
$（'＃tree '）。treeview（' unselectNode '，[nodeId，{silent ： true }]）;
触发nodeUnselected事件; 通过沉默来压制事件。
活动
提供事件以便您的应用程序可以响应树视图状态的更改。例如，如果要在选择节点时更新显示，请使用该nodeSelected事件。
您可以使用选项回调处理程序或标准jQuery .on方法绑定到下面定义的任何事件。
使用选项回调处理程序的示例：
$（'＃tree '）。treeview（{
//回调的命名约定是以`on`
//
为前缀并大写事件名称的第一个字母//例如nodeSelected - > onNodeSelected
onNodeSelected ： function（event，data）{
//你的逻辑在这里
}）;
并使用jQuery .on方法
$（'＃tree '）。on（' nodeSelected '，function（event，data）{
//你的逻辑在这里
}）;
活动清单
nodeChecked (event, node) - 检查节点。
nodeCollapsed (event, node) - 节点已折叠。
nodeDisabled (event, node) - 节点已禁用。
nodeEnabled (event, node) - 已启用节点。
nodeExpanded (event, node) - 扩展节点。
nodeSelected (event, node) - 选择了一个节点。
nodeUnchecked (event, node) - 未选中节点。
nodeUnselected (event, node) - 未选择节点。
searchComplete (event, results) - 搜索完成后
searchCleared (event, results) - 清除搜索结果后
版权和许可
版权所有2013 Jonathan Miles
根据Apache许可证2.0版（“许可证”）获得许可; 除非符合许可，否则您不得使用此文件。您可以在http://www.apache.org/licenses/LICENSE-2.0上获取许可证的副本
除非适用法律要求或书面同意，否则根据许可证分发的软件按“原样”分发，不附带任何明示或暗示的担保或条件。有关管理许可下的权限和限制的特定语言，请参阅许可证。