bootstrap-treeview 中文开发手册

标签：smi   利用   call   generate   jquer   lap   http   data   node   

官方文档URL：  https://www.npmjs.com/package/bootstrap-treeview

2017年11月21日10:45:10

演示：http://www.htmleaf.com/Demo/201502141380.html

下载：http://www.htmleaf.com/jQuery/Menu-Navigation/201502141379.html

 github： https://github.com/jonmiles/bootstrap-treeview 英文原版在下面

依赖

如果提供这些是实际版本bootstrap-treeview已经过测试

• Bootstrap v3.3.4 (>= 3.0.0)
• jQuery v2.1.3 (>= 1.9.0)

开始

安装

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

$ bower install bootstrap-treeview

或者使用 npm:(cnpm吧，你懂的)

$ 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: "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: [
    {},
    ...
  ]
}

//如果你数组里有其他数据，也可以直接加入里面比如

权限节点ID：XXX，

权限节点URL：URL

节点属性

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

text

String Mandatory  字符串 必需

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

icon

String Optional 字符串 可选

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

为简单起见，我们直接利用Bootstraps Glyphicons支持，因此您应该提供由空格分隔的基类和个别图标类。

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

selectedIcon

String Optional 字符串 可选

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

color

String Optional 字符串 可选

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

backColor

String Optional 字符串 可选

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

href

String Optional 字符串 可选

与全局enableLinks选项一起使用，以指定给定节点上的锚点标记URL

selectable

布尔值 默认值：true

是否可以在树中选择一个节点。 False表示节点应作为扩展标题，不会触发选择事件

state

Object Optional 字符串 可选

描述节点的初始状态

state.checked

布尔值 默认值：false

是否选中一个节点，用复选框风格的图标表示

state.disabled

布尔值 默认值：false

是否禁用节点（不可选择，可扩展或可选）

state.expanded

布尔值 默认值：false

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

state.selected

布尔值 默认值：false

是否选择一个节点

tags

字符串数组 可选

与全局showTags选项一起使用可将附加信息添加到每个节点的右侧; 使用Bootstrap Badges

Extendible

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

Options

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

$(‘#tree‘).treeview({
  data: data,         // data is not optional
  levels: 5,
  backColor: ‘green‘
});

您可以随时将新的选项对象传递给树视图，但是这将会重新初始化树视图

List of Options

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

data

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

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

backColor

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

设置所有节点使用的默认背景色，除了在数据中以每个节点为基础重写时

borderColor

String, any legal color value. Default: inherits from Bootstrap.css.

Sets the border color for the component; set showBorder to false if you don‘t want a visible border.

checkedIcon

String, class names(s). Default: "glyphicon glyphicon-check" as defined by Bootstrap Glyphicons

Sets the icon to be as a checked checkbox, used in conjunction with showCheckbox.

collapseIcon

String, class name(s). Default: "glyphicon glyphicon-minus" as defined by Bootstrap Glyphicons

Sets the icon to be used on a collapsible tree node.

color

String, any legal color value. Default: inherits from Bootstrap.css.

Sets the default foreground color used by all nodes, except when overridden on a per node basis in data.

emptyIcon

String, class name(s). Default: "glyphicon" as defined by Bootstrap Glyphicons

Sets the icon to be used on a tree node with no child nodes.

enableLinks

Boolean. Default: false

Whether or not to present node text as a hyperlink. The href value of which must be provided in the data structure on a per node basis.

expandIcon

String, class name(s). Default: "glyphicon glyphicon-plus" as defined by Bootstrap Glyphicons

Sets the icon to be used on an expandable tree node.

highlightSearchResults

Boolean. Default: true

Whether or not to highlight search results.

highlightSelected

Boolean. Default: true

Whether or not to highlight the selected node.

levels

Integer. Default: 2

Sets the number of hierarchical levels deep the tree will be expanded to by default.

multiSelect

Boolean. Default: false

Whether or not multiple nodes can be selected at the same time.

nodeIcon

String, class name(s). Default: "glyphicon glyphicon-stop" as defined by Bootstrap Glyphicons

Sets the default icon to be used on all nodes, except when overridden on a per node basis in data.

onhoverColor

String, any legal color value. Default: ‘#F5F5F5‘.

Sets the default background color activated when the users cursor hovers over a node.

selectedIcon

String, class name(s). Default: "glyphicon glyphicon-stop" as defined by Bootstrap Glyphicons

Sets the default icon to be used on all selected nodes, except when overridden on a per node basis in data.

searchResultBackColor

String, any legal color value. Default: undefined, inherits.

Sets the background color of the selected node.

searchResultColor

String, any legal color value. Default: ‘#D9534F‘.

Sets the foreground color of the selected node.

selectedBackColor

String, any legal color value. Default: ‘#428bca‘.

Sets the background color of the selected node.

selectedColor

String, any legal color value. Default: ‘#FFFFFF‘.

Sets the foreground color of the selected node.

showBorder

Boolean. Default: true

Whether or not to display a border around nodes.

showCheckbox

Boolean. Default: false

Whether or not to display checkboxes on nodes.

showIcon

Boolean. Default: true

Whether or not to display a nodes icon.

showTags

Boolean. Default: false

Whether or not to display tags to the right of each node. The values of which must be provided in the data structure on a per node basis.

uncheckedIcon

String, class names(s). Default: "glyphicon glyphicon-unchecked" as defined by Bootstrap Glyphicons

Sets the icon to be as an unchecked checkbox, used in conjunction with showCheckbox.

Methods

Methods provide a way of interacting with the plugin programmatically. For example, expanding a node is possible via the expandNode method.

You can invoke methods in one of two ways, using either:

1. The plugin‘s wrapper

The plugin‘s wrapper works as a proxy for accessing the underlying methods.

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

Limitation, multiple arguments must be passed as an array of arguments.

2. The treeview directly

You can get an instance of the treeview using one of the two following methods.

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

A better approach, if you plan a lot of interaction.

List of Methods

The following is a list of all available methods.

checkAll(options)

Checks all tree nodes

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

Triggers nodeChecked event; pass silent to suppress events.

checkNode(node | nodeId, options)

Checks a given tree node, accepts node or nodeId.

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

Triggers nodeChecked event; pass silent to suppress events.

clearSearch()

Clear the tree view of any previous search results e.g. remove their highlighted state.

$(‘#tree‘).treeview(‘clearSearch‘);

Triggers searchCleared event

collapseAll(options)

Collapse all tree nodes, collapsing the entire tree.

$(‘#tree‘).treeview(‘collapseAll‘, { silent: true });

Triggers nodeCollapsed event; pass silent to suppress events.

collapseNode(node | nodeId, options)

Collapse a given tree node and it‘s child nodes. If you don‘t want to collapse the child nodes, pass option { ignoreChildren: true }.

$(‘#tree‘).treeview(‘collapseNode‘, [ nodeId, { silent: true, ignoreChildren: false } ]);

Triggers nodeCollapsed event; pass silent to suppress events.

disableAll(options)

Disable all tree nodes

$(‘#tree‘).treeview(‘disableAll‘, { silent: true });

Triggers nodeDisabled event; pass silent to suppress events.

disableNode(node | nodeId, options)

Disable a given tree node, accepts node or nodeId.

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

Triggers nodeDisabled event; pass silent to suppress events.

enableAll(options)

Enable all tree nodes

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

Triggers nodeEnabled event; pass silent to suppress events.

enableNode(node | nodeId, options)

Enable a given tree node, accepts node or nodeId.

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

Triggers nodeEnabled event; pass silent to suppress events.

expandAll(options)

Expand all tree nodes. Optionally can be expanded to any given number of levels.

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

Triggers nodeExpanded event; pass silent to suppress events.

expandNode(node | nodeId, options)

Expand a given tree node, accepts node or nodeId. Optionally can be expanded to any given number of levels.

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

Triggers nodeExpanded event; pass silent to suppress events.

getCollapsed()

Returns an array of collapsed nodes e.g. state.expanded = false.

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

getDisabled()

Returns an array of disabled nodes e.g. state.disabled = true.

$(‘#tree‘).treeview(‘getDisabled‘, nodeId);

getEnabled()

Returns an array of enabled nodes e.g. state.disabled = false.

$(‘#tree‘).treeview(‘getEnabled‘, nodeId);

getExpanded()

Returns an array of expanded nodes e.g. state.expanded = true.

$(‘#tree‘).treeview(‘getExpanded‘, nodeId);

getNode(nodeId)

Returns a single node object that matches the given node id.

$(‘#tree‘).treeview(‘getNode‘, nodeId);

getParent(node | nodeId)

Returns the parent node of a given node, if valid otherwise returns undefined.

$(‘#tree‘).treeview(‘getParent‘, node);

getSelected()

Returns an array of selected nodes e.g. state.selected = true.

$(‘#tree‘).treeview(‘getSelected‘, nodeId);

getSiblings(node | nodeId)

Returns an array of sibling nodes for a given node, if valid otherwise returns undefined.

$(‘#tree‘).treeview(‘getSiblings‘, node);

getUnselected()

Returns an array of unselected nodes e.g. state.selected = false.

$(‘#tree‘).treeview(‘getUnselected‘, nodeId);

remove()

Removes the tree view component. Removing attached events, internal attached objects, and added HTML elements.

$(‘#tree‘).treeview(‘remove‘);

revealNode(node | nodeId, options)

Reveals a given tree node, expanding the tree from node to root.

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

Triggers nodeExpanded event; pass silent to suppress events.

search(pattern, options)

Searches the tree view for nodes that match a given string, highlighting them in the tree.

Returns an array of matching nodes.

$(‘#tree‘).treeview(‘search‘, [ ‘Parent‘, {
  ignoreCase: true,     // case insensitive
  exactMatch: false,    // like or equals
  revealResults: true,  // reveal matching nodes
}]);

Triggers searchComplete event

selectNode(node | nodeId, options)

Selects a given tree node, accepts node or nodeId.

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

Triggers nodeSelected event; pass silent to suppress events.

toggleNodeChecked(node | nodeId, options)

Toggles a nodes checked state; checking if unchecked, unchecking if checked.

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

Triggers either nodeChecked or nodeUnchecked event; pass silent to suppress events.

toggleNodeDisabled(node | nodeId, options)

Toggles a nodes disabled state; disabling if enabled, enabling if disabled.

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

Triggers either nodeDisabled or nodeEnabled event; pass silent to suppress events.

toggleNodeExpanded(node | nodeId, options)

Toggles a nodes expanded state; collapsing if expanded, expanding if collapsed.

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

Triggers either nodeExpanded or nodeCollapsed event; pass silent to suppress events.

toggleNodeSelected(node | nodeId, options)

Toggles a node selected state; selecting if unselected, unselecting if selected.

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

Triggers either nodeSelected or nodeUnselected event; pass silent to suppress events.

uncheckAll(options)

Uncheck all tree nodes.

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

Triggers nodeUnchecked event; pass silent to suppress events.

uncheckNode(node | nodeId, options)

Uncheck a given tree node, accepts node or nodeId.

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

Triggers nodeUnchecked event; pass silent to suppress events.

unselectNode(node | nodeId, options)

Unselects a given tree node, accepts node or nodeId.

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

Triggers nodeUnselected event; pass silent to suppress events.

Events

Events are provided so that your application can respond to changes in the treeview‘s state. For example, if you want to update a display when a node is selected use the nodeSelected event.

You can bind to any event defined below by either using an options callback handler, or the standard jQuery .on method.

Example using options callback handler:

$(‘#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
  });

and using jQuery .on method

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

List of Events

nodeChecked (event, node) - A node is checked.

nodeCollapsed (event, node) - A node is collapsed.

nodeDisabled (event, node) - A node is disabled.

nodeEnabled (event, node) - A node is enabled.

nodeExpanded (event, node) - A node is expanded.

nodeSelected (event, node) - A node is selected.

nodeUnchecked (event, node) - A node is unchecked.

nodeUnselected (event, node) - A node is unselected.

searchComplete (event, results) - After a search completes

searchCleared (event, results) - After search results are cleared

bootstrap-treeview 中文开发手册

标签：smi   利用   call   generate   jquer   lap   http   data   node   

原文地址：http://www.cnblogs.com/zx-admin/p/7872046.html