README

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

依赖项

以下提供的是bootstrap-treeview实际测试过的版本。

入门指南

安装

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

$ bower install bootstrap-treeview

或使用npm

$ npm install bootstrap-treeview

或手动下载。

用法

添加以下资源，以便bootstrap-treeview能够正确运行。

<!-- Required Stylesheets -->
<link href="bootstrap.css" rel="stylesheet">

<!-- Required Javascript -->
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>

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

<div id="tree"></div>

基本用法可能如下所示。

function getTree() {
  // Some logic to retrieve, or generate tree structure
  return data;
}

$('#tree').treeview({data: getTree()});

数据结构

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

示例

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"
  }
];

在最低级别，树节点表示为一个简单的JavaScript对象。此对象需要一个text属性来构建树。

{
  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 可选

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

为了简单起见，我们直接利用Bootstraps Glyphicons支持，因此您应该提供基础类和单独的图标类，两者之间用空格分隔。

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

selectedIcon

String 可选

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

color

String 可选

用于给定节点的前景色，覆盖全局颜色选项。

backColor

String 可选

用于给定节点的背景色，覆盖全局颜色选项。

href

String 可选

与全局enableLinks选项一起使用，用于指定给定节点的锚标签URL。

selectable

Boolean 默认: true

节点是否可选。False表示节点应作为展开标题操作，不会触发选择事件。

state

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

state.checked

Boolean 默认: false

节点是否选中，由复选框样式图标表示。

state.disabled

Boolean 默认: false

节点是否禁用（不可选、可展开或可勾选）。

state.expanded

Boolean 默认: false

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

state.selected

Boolean 默认: false

节点是否选中。

可扩展的

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

选项

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

// 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

对象数组。无默认值，期望有数据

这是树视图显示的核心数据。

backColor

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

设置所有节点默认的背景颜色，除非在数据中按节点覆盖。

borderColor

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

设置组件的边框颜色；如果您不想显示可见边框，则将 showBorder 设置为 false。

checkedIcon

字符串，类名。默认：由 Bootstrap 图标定义的 "glyphicon glyphicon-check"。

设置用作复选框的图标，与 showCheckbox 结合使用。

collapseIcon

字符串，类名。默认：由 Bootstrap 图标定义的 "glyphicon glyphicon-minus"。

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

color

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

设置所有节点默认的前景色，除非在数据中按节点覆盖。

emptyIcon

字符串，类名。默认：由 Bootstrap 图标定义的 "glyphicon"。

设置无子节点的树节点上使用的图标。

enableLinks

布尔值。默认：false

是否将节点文本呈现为超链接。其 href 值必须在数据结构中按节点提供。

expandIcon

字符串，类名。默认：由 Bootstrap 图标定义的 "glyphicon glyphicon-plus"。

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

highlightSearchResults

布尔值。默认：true

是否突出显示搜索结果。

highlightSelected

布尔值。默认：true

是否突出显示所选节点。

levels

整数。默认：2

设置默认情况下树视图展开的层级深度。

multiSelect

布尔值。默认：false

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

nodeIcon

字符串，类名。默认：由 Bootstrap 图标定义的 "glyphicon glyphicon-stop"。

设置所有节点默认的图标，除非在数据中按节点覆盖。

onhoverColor

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

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

selectedIcon

字符串，类名。默认：由 Bootstrap 图标定义的 "glyphicon glyphicon-stop"。

设置所有选中节点的默认图标，除非在数据中按节点覆盖。

searchResultBackColor

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

设置选中节点的背景颜色。

searchResultColor

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

设置选中节点的前景色。

selectedBackColor

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

设置选中节点的背景颜色。

selectedColor

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

设置选中节点的前景色。

showBorder

布尔值。默认：true

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

showCheckbox

布尔值。默认：false

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

showIcon

布尔值。默认：true

是否显示节点的图标。

showTags

布尔值。默认：false

是否在节点的右侧显示标签。这些值的提供必须在每个节点的基础上在数据结构中提供。

uncheckedIcon

字符串，类名(s)。默认值："glyphicon glyphicon-unchecked"，由Bootstrap Glyphicons定义

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

方法

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

您可以通过两种方式调用方法，使用以下任一方法

1. 插件的包装器

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

$('#tree').treeview('methodName', args)

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

2. 树形视图直接

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

// This special method returns an instance of the treeview.
$('#tree').treeview(true)
  .methodName(args);

// The instance is also saved in the DOM elements data,
// and accessible using the plugin's id 'treeview'.
$('#tree').data('treeview')
  .methodName(args);

如果您计划进行大量交互，这是一个更好的方法。

方法列表

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

checkAll(options)

检查所有树节点

$('#tree').treeview('checkAll', { silent: true });

触发nodeChecked事件；传递silent以抑制事件。

checkNode(node | nodeId, options)

检查给定的树节点，接受节点或nodeId。

$('#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)

禁用给定的树节点，接受节点或nodeId。

$('#tree').treeview('disableNode', [ nodeId, { silent: true } ]);

触发nodeDisabled事件；传递silent以抑制事件。

enableAll(options)

启用所有树节点

$('#tree').treeview('enableAll', { silent: true });

触发nodeEnabled事件；传递silent以抑制事件。

enableNode(node | nodeId, options)

启用给定的树节点，接受节点或nodeId。

$('#tree').treeview('enableNode', [ nodeId, { silent: true } ]);

触发nodeEnabled事件；传递silent以抑制事件。

expandAll(options)

展开所有树节点。可以选择展开到任何给定数量的级别。

$('#tree').treeview('expandAll', { levels: 2, silent: true });

触发nodeExpanded事件；传递silent以抑制事件。

expandNode(node | nodeId, options)

展开给定的树节点，接受节点或nodeId。可以选择展开到任何给定数量的级别。

$('#tree').treeview('expandNode', [ nodeId, { levels: 2, silent: true } ]);

触发nodeExpanded事件；传递silent以抑制事件。

getCollapsed()

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

$('#tree').treeview('getCollapsed', nodeId);

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(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
}]);

触发 searchComplete 事件

selectNode(node | nodeId, options)

选择指定的树节点，接受节点或节点ID。

$('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);

触发 nodeSelected 事件；传递 silent 以抑制事件。

toggleNodeChecked(node | nodeId, options)

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

$('#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)

取消选中所有树节点。

$('#tree').treeview('uncheckAll', { silent: true });

触发 nodeUnchecked 事件；传递 silent 以抑制事件。

uncheckNode(node | nodeId, options)

取消选中指定的树节点，接受节点或节点ID。

$('#tree').treeview('uncheckNode', [ nodeId, { silent: true } ]);

触发 nodeUnchecked 事件；传递 silent 以抑制事件。

unselectNode(node | nodeId, options)

取消选中指定的树节点，接受节点或节点ID。

$('#tree').treeview('unselectNode', [ nodeId, { silent: true } ]);

触发 nodeUnselected 事件；传递 silent 以抑制事件。

事件

提供事件，以便您的应用程序可以响应树视图状态的变化。例如，如果要在节点被选中时更新显示，请使用 nodeSelected 事件。

您可以通过使用选项回调处理程序或标准 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) {
    // Your logic goes here
  });

和使用 jQuery .on 方法

$('#tree').on('nodeSelected', function(event, data) {
  // Your logic goes here
});

事件列表

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 License 2.0 许可（“许可证”）；除非根据适用法律要求或书面同意，否则不得使用此文件，除非符合许可证。您可以在 https://apache.ac.cn/licenses/LICENSE-2.0 获取许可证副本。

除非适用法律要求或书面同意，否则在许可证下分发的软件按“原样”分发，不提供任何明示或暗示的保证或条件。有关许可证中规定的具体语言管理权限和限制，请参阅许可证。

intelogie / bootstrap-treeview

维护者

详细信息

README

依赖项

入门指南

安装

用法

数据结构

节点属性

text

icon

selectedIcon

color

backColor

href

selectable

state

state.checked

state.disabled

state.expanded

state.selected

tags

可扩展的

选项

选项列表

data

backColor

borderColor

checkedIcon

collapseIcon

color

emptyIcon

enableLinks

expandIcon

highlightSearchResults

highlightSelected

levels

multiSelect

nodeIcon

onhoverColor

selectedIcon

searchResultBackColor

searchResultColor

selectedBackColor

selectedColor

showBorder

showCheckbox

showIcon

showTags

uncheckedIcon

方法

1. 插件的包装器

2. 树形视图直接

方法列表

checkAll(options)

checkNode(node | nodeId, options)

clearSearch()

collapseAll(options)

collapseNode(node | nodeId, options)

disableAll(options)

disableNode(node | nodeId, options)

enableAll(options)

enableNode(node | nodeId, options)

expandAll(options)

expandNode(node | nodeId, options)

getCollapsed()

getDisabled()

getEnabled()

getExpanded()

getNode(nodeId)

getParent(node | nodeId)

getSelected()

getSiblings(node | nodeId)

getUnselected()

remove()

revealNode(node | nodeId, options)

search(pattern, options)

selectNode(node | nodeId, options)

toggleNodeChecked(node | nodeId, options)