一个简单而优雅的解决方案，可以显示层次结构树结构（即树状视图），同时利用Twitter Bootstrap提供的最佳功能。

如果提供了这些实际版本，则对patternfly-bootstrap-treeview进行了测试。

• 引导v3.3.4（>=3.0.0）（不支持Bootstrap 4）
• jQuery v2.1.3（>=1.9.0）

您可以使用bower安装（推荐）：

$ 凉亭 安装 花蝇-引导数据库-控件

或使用npm：

$ 净现值法 安装 花蝇-引导数据库-控件

或下载手动操作。

添加以下资源以使patternfly-bootstrap-treeview正常工作。

<!-- 所需样式表-->
<链接 href公司="引导.css"相对="样式表">

<!-- 必需的Javascript-->
<脚本 src公司="jquery.js公司"></脚本>
<脚本 src公司="bootstrap-treeview.js"></脚本>

该组件将绑定到任何现有的DOM元素。

<div公司 身份证件="树"></div公司>

基本用法可能如下所示。

功能 获取树() {
  //检索或生成树结构的一些逻辑
  返回 数据;
}

$('#树').控件({数据:获取树()});

为了定义树所需的层次结构，有必要提供JavaScript对象的嵌套数组。

例子

无功功率，无功功率 树 = [
  {
    文本:“父级1”,
    节点:[
      {
        文本:“儿童1”,
        节点:[
          {
            文本:“孙子1”
          },
          {
            文本:“孙子2”
          }
        ]
      },
      {
        文本:“儿童2”
      }
    ]
  },
  {
    文本:“家长2”
  },
  {
    文本:“家长3”
  },
  {
    文本:“家长4”
  },
  {
    文本:“家长5”
  }
];

在最底层，树节点表示为简单的JavaScript对象。这是必需的属性文本会给你造一棵树。

{
  文本:“节点1”
}

如果您想做更多的工作，下面是完整的节点规范

{
  文本:“节点1”,
  偶像:“字形图标字形图标停止”,
  形象:“something.png”,
  所选图标:“字形图标字形图标停止”,
  颜色:"#000000",
  backColor（背景颜色）:“#FFFFFF”,
  图标颜色:“#FFFFFF”,
  图标背景:"#000000",
  可选择的:真的,
  可检查的:真的,
  状态:{
    选中的:真的,
    禁用:真的,
    扩大:真的,
    挑选出来的:真的
  },
  标签:[
    “可用”,
    {文本:'不可用', 班:“已禁用”}
  ],
  数据属性:{
    目标:'#树'
  }
  身份证件:“一些东西”,
  班:“特别特别”,
  隐藏复选框:真的,
  节点:[
    {},...]
}

定义了以下属性以允许节点级别的覆盖，例如特定于节点的图标、颜色和标记。

字符串 强制性的

为给定树节点显示的文本值，通常位于节点图标的右侧。

字符串 选项

鼠标悬停时为给定树节点显示的工具提示值。

字符串 可选

显示在给定节点上的图标，通常位于文本左侧。

字符串 可选

显示在给定节点上的图像会覆盖图标。

为了简单起见，我们直接利用引导标志符号支持因此，您应该提供由空格分隔的基类和单个图标类。

通过提供基类，您可以完全控制所使用的图标。如果您想使用自己的类，只需将类添加到此图标字段。

字符串 可选

选定时显示在给定节点上的图标，通常位于文本左侧。

字符串 可选

给定节点上使用的前景色将覆盖全局颜色选项。

字符串 可选

给定节点上使用的背景色将覆盖全局颜色选项。

字符串 可选

给定节点图标上使用的颜色。

字符串 可选

给定节点背景图标下使用的颜色。

布尔值 默认值：false

将展开图标添加到节点，即使它没有子节点，它也会在第一次展开时调用lazyLoad（）函数（如下所述）。

布尔值 默认值：true

节点在树中是否可选。False表示节点应充当扩展标题，不会触发选择事件。

布尔值 默认值：true

节点在树中是否可检查，与一起使用show复选框.

对象 可选描述节点的初始状态。

布尔值 默认值：false

是否选中节点，由复选框样式的glyphicon表示。

布尔值 默认值：false

节点是否被禁用（不可选、不可扩展或不可检查）。

布尔值 默认值：false

节点是否展开，即是否打开。优先于全局选项级别。

布尔值 默认值：false

是否选择了节点。

字符串数组 可选

与全局showTags选项一起使用，可将附加信息添加到每个节点的右侧；使用引导程序徽章

标记可以是一个对象，其属性“text”表示标记值，“class”表示此标记的类名

串 可选

字符串，类名。默认值：“徽章”

设置节点标记的类别

对象数组 可选

每个节点的HTML列表数据-要附加的属性。

字符串 可选

要附加的自定义CSS类的列表，以空格分隔。

字符串 可选

自定义HTML id属性。

布尔值 默认值：false

用于在以下情况下隐藏给定节点的复选框show复选框设置为真的.

您可以通过添加应用程序所需的任意数量的附加键值对来扩展节点对象。请记住，这是将在选择事件期间传递的对象。

选项允许您自定义树视图的默认外观和行为。它们在初始化时作为对象传递给插件。

//示例：初始化树视图
//扩展到5个级别
//背景色为绿色
$(“#tree”).控件({
  数据:数据,
  水平:5,
  backColor（背景颜色）:“绿色”
});

您可以随时将新的选项对象传递给树视图，但这将产生重新初始化树视图的效果。

以下是所有可用选项的列表。

对象数组。无默认值，应为data或dataUrl。

这是要通过树状视图显示的核心数据。如果提供了数据，dataUrl将被忽略。

jQuery Ajax设置对象，如本文所述.

接受配置Ajax请求的一组键/值对。所有设置都是可选的，提供的任何设置都将与以下默认配置合并。

{
  方法:“获取”,
  数据库类型:“json”,
  隐藏物:假
}

JSON是唯一接受的格式。

字符串，任何合法的颜色值默认值：从Bootstrap.css继承。

设置所有节点使用的默认背景色，除非在数据中基于每个节点被覆盖。

字符串，任何合法的颜色值默认值：继承自Bootstrap.css。

设置组件的边框颜色；如果不需要可见边框，请将showBorder设置为false。

字符串，任何合法的颜色值默认值：蓝色

设置带有已更改复选框的节点的文本颜色。

布尔值。默认值：false

将节点图标与复选框交换，与showCheckbox一起使用。

字符串，类名。默认值：由定义的“glyphiconglypicon-check”引导标志符号

将图标设置为选中复选框，与showCheckbox一起使用。

字符串，类名。默认值：由定义的“glyphiconglypicon-nusus”引导标志符号

设置要在可折叠树节点上使用的图标。

字符串，任何合法的颜色值默认值：继承自Bootstrap.css。

设置所有节点使用的默认前景色，除非在数据中以每个节点为基础进行覆盖。

字符串，类名。默认值：由定义的“glyphicon”引导标志符号

设置要在没有子节点的树节点上使用的图标。

字符串，类名。默认值：由定义的“glyphiconglypicon-plus”引导符号

设置要在可展开树节点上使用的图标。

字符串，类名。默认值：由定义的“glyphiconglypicon-hurglass”引导标志符号

设置要在加载lazyLoad节点的内容之前在其上使用的图标。

布尔值。默认值：false

是否启用复选框的分层检查/取消检查。

布尔值。默认值：false

是否将nodeChecked和nodeUnchecked事件传播到父/子节点，与hierarchicalCheck一起使用。

布尔值。默认值：false高亮显示复选框状态已更改的节点，与showCheckbox一起使用。

布尔值。默认值：true

是否突出显示搜索结果。

布尔值。默认值：true

是否高亮显示所选节点。

功能。默认值：未定义

当一个懒洋洋的可加载节点第一次被扩展时，就会调用这个函数。节点可用作第一个参数，而第二个参数是负责将加载的数据传递给渲染器的函数。数据需要与上面指定的JSON格式相同。

整数。默认值：2

设置默认情况下树将扩展到的层次结构级别数。

布尔值。默认值：false

是否可以同时选择多个节点。

字符串，类名。默认值：由定义的“glyphiconglypicon-stop”引导标志符号

将默认图标设置为在所有节点上使用，除非在数据中以每个节点为基础进行覆盖。

字符串，任何合法的颜色值。默认值：“#F5F5F5”。

设置当用户光标悬停在节点上时激活的默认背景色。

字符串，类名。默认值：“glyphiconglypicon-expand”，由定义引导标志符号

将图标设置为部分选中的复选框，与showCheckbox和hierarchicalCheck一起使用。

布尔值。默认值：false

在不首先选择其他节点的情况下，是否可以取消选择节点。

布尔值。默认值：false

节点已选定时是否可以重新选择，与preventUnselect一起使用。

字符串，类名。默认值：由定义的“glyphiconglypicon-stop”引导标志符号

设置要在所有选定节点上使用的默认图标，但在数据中基于每个节点覆盖时除外。

字符串，任何合法的颜色值。默认值：未定义，继承。

设置选定节点的背景色。

字符串，任何合法的颜色值。默认值：“#D9534F”。

设置选定节点的前景色。

字符串，任何合法的颜色值。默认值：“#428bca”。

设置选定节点的背景色。

字符串，任何合法的颜色值。默认值：“#FFFFFF”。

设置选定节点的前景色。

布尔值。默认值：true

是否在节点周围显示边框。

布尔值。默认值：false

是否在节点上显示复选框。

布尔值。默认值：true

是否显示节点图标。

布尔值。默认值：false

是否显示节点图像而不是图标。

布尔值。默认值：false

是否在每个节点的右侧显示标记。必须在数据结构中按节点提供其值。

字符串，类名。默认值：“徽章”

设置标记的类别

字符串，类名。默认值：“glyphiconglypicon-unchecked”，由定义引导标志符号

将图标设置为未选中的复选框，与showCheckbox一起使用。

布尔值。默认值：false

是否用<span class='text'>标签。

方法提供了一种以编程方式与插件交互的方法。例如，可以通过expandNode方法扩展节点。

您可以使用以下两种方法之一调用方法：

插件的包装器充当访问底层方法的代理。

$(“#tree”).控件(“methodName”, 参数)

限制，多个参数必须作为参数数组传递。

您可以使用以下两种方法之一获取树视图的实例。

//此特殊方法返回树视图的实例。
$(“#tree”).控件(真的)
  .调用的方法名(参数);

//实例也保存在DOM元素数据中，
//并使用插件的id“treeview”进行访问。
$(“#tree”).数据(“树状视图”)
  .调用的方法名(参数);

如果你计划大量的互动，这是一个更好的方法。

如果要进行多个API调用，请存储对树视图实例的引用。

无功功率，无功功率 树 = $(“#tree”).控件(真的);
树.方法1(参数);
树.方法2(参数);

以下是所有可用方法的列表。

所有方法都声明参数节点将接受单个节点或节点阵列。

向树中添加节点。

$(“#tree”).控件('添加节点', [ 节点, 返回节点, 指数, { 沉默的:真的 } ]);

如果parentNode的计算结果为false，则节点将添加到根

如果索引的计算结果为false，则节点将附加到节点

触发器节点已渲染事件；传递silent以抑制事件。

在给定节点之后将节点添加到树中。

$(“#tree”).控件('添加节点后', [ 节点, 节点, { 沉默的:真的 } ]);

如果节点的计算结果为false，则节点将被添加到树的根之前

触发器节点已渲染事件；传递silent以抑制事件。

将节点添加到给定节点之前的树中。

$(“#tree”).控件('添加节点后', [ 节点, 节点, { 沉默的:真的 } ]);

如果节点的计算结果为false，则节点将附加到树的根

触发器节点已渲染事件；传递silent以抑制事件。

检查所有树节点

$(“#tree”).控件('选中全部', { 沉默的:真的 });

触发器节点已检查事件；传递silent以抑制事件。

检查给定的树节点。

$(“#tree”).控件('检查节点', [ 节点, { 沉默的:真的 } ]);

触发器节点已检查事件；传递silent以抑制事件。

清除以前所有搜索结果的树视图，例如删除其突出显示的状态。

$(“#tree”).控件('清除搜索');

触发器搜索已清除事件

折叠所有树节点，折叠整个树。

$(“#tree”).控件('全部折叠', { 沉默的:真的 });

触发器节点已折叠事件；传递silent以抑制事件。

折叠给定的树节点及其子节点。如果不想折叠子节点，请传递选项{ignoreChildren：true}.

$(“#tree”).控件('折叠节点', [ 节点, { 沉默的:真的, 无知的孩子:假 } ]);

触发器节点已折叠事件；传递silent以抑制事件。

禁用所有树节点

$(“#tree”).控件('禁用所有', { 沉默的:真的, 保持状态:真的 });

触发器节点已禁用事件；传递silent以禁止事件，传递keepState以保持展开/选中/选定状态。

禁用给定的树节点。

$(“#tree”).控件('禁用节点', [ 节点, { 沉默的:真的, 保持状态:真的 } ]);

触发器节点已禁用事件；传递silent以禁止事件，传递keepState以保持展开/选中/选定状态。

启用所有树节点

$(“#tree”).控件('启用全部', { 沉默的:真的 });

触发器节点已启用事件；传递silent以抑制事件。

启用给定的树节点。

$(“#tree”).控件('启用节点', [ 节点, { 沉默的:真的 } ]);

触发器节点已启用事件；传递silent以抑制事件。

展开所有树节点。可选地，可以扩展到任意给定数量的级别。

$(“#tree”).控件('扩展全部', { 水平:2, 沉默的:真的 });

触发器节点已展开事件；传递静默以抑制事件。

展开给定的树节点。可选地，可以扩展到任意给定数量的级别。

$('#树').控件(“expandNode”, [ 节点, { 水平:2, 沉默的:真的 } ]);

触发器节点已展开事件；传递silent以抑制事件。

返回匹配节点对象的数组。

$('#树').控件('查找节点', ['父级', “文本”]);

使用正则表达式匹配NOT字符串等于的模式，如果需要匹配精确的字符串，请使用起始和结束字符串锚定，例如^pattern$。

返回选中节点的数组，例如state.checked=true。

$(“#tree”).控件(“已选中”);

返回折叠节点的数组，例如state.expanded=false。

$(“#tree”).控件('获取折叠');

返回禁用节点的数组，例如state.disabled=true。

$(“#tree”).控件(“getDisabled”);

返回已启用节点的数组，例如state.disabled=false。

$(“#tree”).控件('获取启用');

返回展开节点的数组，例如state.expanded=true。

$(“#tree”).控件('获取扩展');

返回所有已初始化节点的数组。

$(“#tree”).控件(“获取节点”, 节点);

返回给定节点的父节点，否则返回未定义的父节点。

$(“#tree”).控件(“获取父级”, 节点);

返回选定节点的数组，例如state.selected=true。

$(“#tree”).控件('获取选定内容');

返回给定节点的同级节点数组，如果有效则返回未定义的。

$(“#tree”).控件(“获取兄弟姐妹”, 节点);

返回未选中节点的数组，例如state.checked=false。

$(“#tree”).控件('取消选中');

返回未选定节点的数组，例如state.selected=false。

$(“#tree”).控件('取消选中');

删除树视图组件。删除附加的事件、内部附加的对象和添加的HTML元素。

$(“#tree”).控件('删除');

从树中删除给定节点。

$('#树').控件('删除节点', [ 节点, { 沉默的:真的 } ]);

显示给定的树节点，将树从节点扩展到根。

$(“#tree”).控件('显示节点', [ 节点, { 沉默的:真的 } ]);

触发器节点已展开事件；传递silent以抑制事件。

在树视图中搜索与给定字符串匹配的节点，并在树中高亮显示它们。

返回匹配节点的数组。

$(“#tree”).控件(“搜索”, [ '父级', {
  忽略案例:真的,     //不区分大小写
  exactMatch（精确匹配）:假,    //相似或相等
  显示结果:真的,  //显示匹配节点
}]);

触发器搜索完成事件

选择给定的树节点。

$(“#tree”).控件('选择节点', [ 节点, { 沉默的:真的 } ]);

触发器节点已选择事件；传递silent以抑制事件。

切换节点的选中状态；如果未选中则选中，如果选中则取消选中。

$(“#tree”).控件('切换节点已选中', [ 节点, { 沉默的:真的 } ]);

触发器节点已检查或节点未选中事件；传递silent以抑制事件。

切换节点的禁用状态；启用时禁用，禁用时启用。

$('#树').控件('切换节点禁用', [ 节点, { 沉默的:真的 } ]);

触发器节点已禁用或节点已启用事件；传递silent以抑制事件。

切换节点的展开状态；如果膨胀则塌陷，如果塌陷则膨胀。

$(“#tree”).控件('切换节点扩展', [ 节点, { 沉默的:真的 } ]);

触发器节点已展开或节点已折叠事件；传递silent以抑制事件。

切换节点选定状态；如果未选中则选择，如果选中则取消选择。

$(“#tree”).控件('切换所选节点', [ 节点, { 沉默的:真的 } ]);

触发任一节点已选择或节点未选定事件；传递静默以抑制事件。

取消选中所有树节点。

$(“#tree”).控件('取消选中全部', { 沉默的:真的 });

触发器节点未选中事件；传递silent以抑制事件。

取消选中给定的树节点。

$(“#tree”).控件('取消选中节点', [ 节点, { 沉默的:真的 } ]);

触发器节点未选中事件；传递silent以抑制事件。

更新/替换给定的树节点。

$(“#tree”).控件(“updateNode”, [ 节点, 新节点, { 沉默的:真的 } ]);

触发器节点已渲染事件；传递silent以抑制事件。

将所有复选框标记为未更改，从每个复选框中删除高亮显示的类。

取消选择给定的树节点。

$(“#tree”).控件('取消选择节点', [ 节点, { 沉默的:真的 } ]);

触发器节点未选定事件；传递silent以抑制事件。

提供了事件，以便应用程序能够响应树视图状态的更改。例如，如果要在选择节点时更新显示，请使用节点已选择事件。

您可以使用选项回调处理程序或标准jQuery.on方法绑定到下面定义的任何事件。

使用选项回调处理程序的示例：

$(“#tree”).控件({
  //回调的命名约定是以“on”作为前缀`
  //并将事件名称的第一个字母大写
  //例如，nodeSelected->onNodeSelected
  onNode已选择:功能(事件, 数据) {
    //你的逻辑在这里
  });

并使用jQuery.on方法

$(“#tree”).在('节点已选择', 功能(事件, 数据) {
  //你的逻辑在这里
});

对生命周期事件使用回调处理程序，否则将错过创建期间激发的事件。

加载（事件）-树已启动数据加载。

加载失败（事件，错误）-树加载数据失败（ajax错误）

已初始化（事件，节点）-树已初始化自身，数据已准备好呈现。

节点渲染（事件，节点）-渲染新节点；

渲染（事件，节点）-渲染树；

已销毁（事件）这棵树正在被毁坏；

节点已检查（事件，节点）-选中一个节点。

nodeCollapsed（事件，节点）-节点已折叠。

节点禁用（事件，节点）-节点已禁用。

nodeEnabled（事件，节点）-节点已启用。

nodeExpanded（事件，节点）-节点已展开。

nodeSelected（事件，节点）-选择了一个节点。

nodeUnchecked（事件，节点）-未选中节点。

nodeUnselected（事件，节点）-未选择节点。

searchComplete（事件，结果）-搜索完成后

searchCleared（事件，结果）-清除搜索结果后

所有发出多个节点的事件都是作为对象集合而不是数组发出的。这是因为jQuery在克隆普通JavaScript对象时存在局限性。如果需要节点数组，则需要将对象还原为数组。

版权所有2013 Jonathan Miles

根据Apache许可证2.0版（“许可证”）许可；除非符合许可证，否则您不能使用此文件。您可以在以下地址获得许可证副本：http://www.apache.org/LICENSE/LICENSE-2.0网址

除非适用法律要求或书面同意，否则软件根据许可证分发的是按“原样”分发的，无任何明示或暗示的保证或条件。有关管理权限的特定语言和许可证下的限制。