{"id":15511810,"url":"https://github.com/patternfly/patternfly-bootstrap-treeview","last_synced_at":"2025-10-22T19:25:15.592Z","repository":{"id":38420852,"uuid":"63903607","full_name":"patternfly/patternfly-bootstrap-treeview","owner":"patternfly","description":"Tree View for Twitter Bootstrap - ","archived":false,"fork":true,"pushed_at":"2020-06-19T20:38:26.000Z","size":1201,"stargazers_count":200,"open_issues_count":43,"forks_count":105,"subscribers_count":24,"default_branch":"master","last_synced_at":"2024-10-03T09:54:23.597Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://jonmiles.github.io/bootstrap-treeview","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"jonmiles/bootstrap-treeview","license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patternfly.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-21T21:29:51.000Z","updated_at":"2023-08-18T00:42:58.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/patternfly/patternfly-bootstrap-treeview","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Fpatternfly-bootstrap-treeview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Fpatternfly-bootstrap-treeview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Fpatternfly-bootstrap-treeview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patternfly%2Fpatternfly-bootstrap-treeview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patternfly","download_url":"https://codeload.github.com/patternfly/patternfly-bootstrap-treeview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236188359,"owners_count":19109394,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T09:53:14.319Z","updated_at":"2025-10-12T08:32:00.336Z","avatar_url":"https://github.com/patternfly.png","language":"JavaScript","readme":"# Bootstrap Tree View\n\n---\n\n![Bower version](https://img.shields.io/bower/v/patternfly-bootstrap-treeview.svg?style=flat)\n[![npm version](https://img.shields.io/npm/v/patternfly-bootstrap-treeview.svg?style=flat)](https://www.npmjs.com/package/patternfly-bootstrap-treeview)\n[![Build Status](https://img.shields.io/travis/patternfly/patternfly-bootstrap-treeview/master.svg?style=flat)](https://travis-ci.org/patternfly/patternfly-bootstrap-treeview)\n\nA simple and elegant solution to displaying hierarchical tree structures (i.e. a Tree View) while leveraging the best that Twitter Bootstrap has to offer.\n\n![Bootstrap Tree View Default](https://raw.github.com/jonmiles/patternfly-bootstrap-treeview/master/screenshot/default.PNG)\n\n## Dependencies\n\nWhere provided these are the actual versions patternfly-bootstrap-treeview has been tested against.\n\n- [Bootstrap v3.3.4 (\u003e= 3.0.0)](http://getbootstrap.com/) (doesn't support Bootstrap 4)\n- [jQuery v2.1.3 (\u003e= 1.9.0)](http://jquery.com/)\n\n\n## Getting Started\n\n### Install\n\nYou can install using bower (recommended):\n\n```javascript\n$ bower install patternfly-bootstrap-treeview\n```\n\nor using npm:\n\n```javascript\n$ npm install patternfly-bootstrap-treeview\n```\n\nor [download](https://github.com/jonmiles/patternfly-bootstrap-treeview/releases) manually.\n\n\n\n### Usage\n\nAdd the following resources for the patternfly-bootstrap-treeview to function correctly.\n\n```html\n\u003c!-- Required Stylesheets --\u003e\n\u003clink href=\"bootstrap.css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- Required Javascript --\u003e\n\u003cscript src=\"jquery.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"bootstrap-treeview.js\"\u003e\u003c/script\u003e\n```\n\nThe component will bind to any existing DOM element.\n\n```html\n\u003cdiv id=\"tree\"\u003e\u003c/div\u003e\n```\n\nBasic usage may look something like this.\n\n```javascript\nfunction getTree() {\n  // Some logic to retrieve, or generate tree structure\n  return data;\n}\n\n$('#tree').treeview({data: getTree()});\n```\n\n\n## Data Structure\n\nIn order to define the hierarchical structure needed for the tree it's necessary to provide a nested array of JavaScript objects.\n\nExample\n\n```javascript\nvar tree = [\n  {\n    text: \"Parent 1\",\n    nodes: [\n      {\n        text: \"Child 1\",\n        nodes: [\n          {\n            text: \"Grandchild 1\"\n          },\n          {\n            text: \"Grandchild 2\"\n          }\n        ]\n      },\n      {\n        text: \"Child 2\"\n      }\n    ]\n  },\n  {\n    text: \"Parent 2\"\n  },\n  {\n    text: \"Parent 3\"\n  },\n  {\n    text: \"Parent 4\"\n  },\n  {\n    text: \"Parent 5\"\n  }\n];\n```\n\nAt the lowest level a tree node is a represented as a simple JavaScript object.  This one required property `text` will build you a tree.\n\n```javascript\n{\n  text: \"Node 1\"\n}\n```\n\nIf you want to do more, here's the full node specification\n\n```javascript\n{\n  text: \"Node 1\",\n  icon: \"glyphicon glyphicon-stop\",\n  image: \"something.png\",\n  selectedIcon: \"glyphicon glyphicon-stop\",\n  color: \"#000000\",\n  backColor: \"#FFFFFF\",\n  iconColor: \"#FFFFFF\",\n  iconBackground: \"#000000\",\n  selectable: true,\n  checkable: true,\n  state: {\n    checked: true,\n    disabled: true,\n    expanded: true,\n    selected: true\n  },\n  tags: [\n    'available',\n    {text:'not available', class:'disabled'}\n  ],\n  dataAttr: {\n    target: '#tree'\n  }\n  id: 'something',\n  class: 'special extraordinary',\n  hideCheckbox: true,\n  nodes: [\n    {},\n    ...\n  ]\n}\n```\n\n### Node Properties\n\nThe following properties are defined to allow node level overrides, such as node specific icons, colours and tags.\n\n#### text\n`String` `Mandatory`\n\nThe text value displayed for a given tree node, typically to the right of the nodes icon.\n\n#### tooltip\n`String` `Option`\n\nThe tooltip value displayed for a given tree node on mouse hover.\n\n#### icon\n`String` `Optional`\n\nThe icon displayed on a given node, typically to the left of the text.\n\n#### image\n`String` `Optional`\n\nThe image displayed on a given node, overrides the icon.\n\nFor simplicity we directly leverage [Bootstraps Glyphicons support](http://getbootstrap.com/components/#glyphicons) and as such you should provide both the base class and individual icon class separated by a space.  \n\nBy providing the base class you retain full control over the icons used.  If you want to use your own then just add your class to this icon field.\n\n#### selectedIcon\n`String` `Optional`\n\nThe icon displayed on a given node when selected, typically to the left of the text.\n\n#### color\n`String` `Optional`\n\nThe foreground color used on a given node, overrides global color option.\n\n#### backColor\n`String` `Optional`\n\nThe background color used on a given node, overrides global color option.\n\n#### iconColor\n`String` `Optional`\n\nThe color used on a given node's icon.\n\n#### iconBackground\n`String` `Optional`\n\nThe color used under a given node's background icon.\n\n#### lazyLoad\n`Boolean` `Default: false`\n\nAdds an expand icon to the node even if it has no children, it calls the lazyLoad() function (described below) upon the first expand.\n\n#### selectable\n`Boolean` `Default: true`\n\nWhether or not a node is selectable in the tree. False indicates the node should act as an expansion heading and will not fire selection events.\n\n#### checkable\n`Boolean` `Default: true`\n\nWhether or not a node is checkable in the tree, used in conjunction with `showCheckbox`.\n\n#### state\n`Object` `Optional`\nDescribes a node's initial state.\n\n#### state.checked\n`Boolean` `Default: false`\n\nWhether or not a node is checked, represented by a checkbox style glyphicon.\n\n#### state.disabled\n`Boolean` `Default: false`\n\nWhether or not a node is disabled (not selectable, expandable or checkable).\n\n#### state.expanded\n`Boolean` `Default: false`\n\nWhether or not a node is expanded i.e. open.  Takes precedence over global option levels.\n\n#### state.selected\n`Boolean` `Default: false`\n\nWhether or not a node is selected.\n\n#### tags\n`Array of Strings`  `Optional`\n\nUsed in conjunction with global showTags option to add additional information to the right of each node; using [Bootstrap Badges](http://getbootstrap.com/components/#badges)\n\nA tag can be an object with properties 'text' for tag value and 'class' for class names(s) of this tag\n\n#### tagsClass\n`Strings`  `Optional`\n\nString, class names(s).  Default: \"badge\"\n\nSets the class of node tags\n\n#### dataAttr\n`Array of Objects`  `Optional`\n\nList of per-node HTML `data-` attributes to append.\n\n#### class\n`String`  `Optional`\n\nList of custom CSS classes to append, separated by space.\n\n#### id\n`String`  `Optional`\n\nCustom HTML id attribute.\n\n#### hideCheckbox\n`Boolean` `Default: false`\n\nUsed to hide the checkbox of the given node when [showCheckbox](#showcheckbox) is set to `true`.\n\n### Extendible\n\nYou can extend the node object by adding any number of additional key value pairs that you require for your application.  Remember this is the object which will be passed around during selection events.\n\n\n\n## Options\n\nOptions allow you to customise the treeview's default appearance and behaviour.  They are passed to the plugin on initialization, as an object.\n\n```javascript\n// Example: initializing the treeview\n// expanded to 5 levels\n// with a background color of green\n$('#tree').treeview({\n  data: data,\n  levels: 5,\n  backColor: 'green'\n});\n```\nYou can pass a new options object to the treeview at any time but this will have the effect of re-initializing the treeview.\n\n### List of Options\n\nThe following is a list of all available options.\n\n#### data\nArray of Objects.  No default, expects either data or dataUrl.\n\nThis is the core data to be displayed by the tree view.  If data is provided, dataUrl will be ignored.\n\n#### dataUrl\njQuery Ajax settings object, [as documented here](http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings).\n\nAccepts a set of key/value pairs that configure an Ajax request.  All settings are optional, any provided will be merge with the following default configuration.\n\n```javascript\n{\n  method: 'GET',\n  dataType: 'json',\n  cache: false\n}\n```\n\n\u003e JSON is the only format accepted.\n\n#### backColor\nString, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp).  Default: inherits from Bootstrap.css.\n\nSets the default background color used by all nodes, except when overridden on a per node basis in data.\n\n#### borderColor\nString, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp).  Default: inherits from Bootstrap.css.\n\nSets the border color for the component; set showBorder to false if you don't want a visible border.\n\n#### changedNodeColor\nString, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp).  Default: blue\n\nSets the text color for a node with a changed checkbox.\n\n#### checkboxFirst\nBoolean. Default: false\n\nSwaps the node icon with the checkbox, used in conjunction with showCheckbox.\n\n#### checkedIcon\nString, class names(s).  Default: \"glyphicon glyphicon-check\" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)\n\nSets the icon to be as a checked checkbox, used in conjunction with showCheckbox.\n\n#### collapseIcon\nString, class name(s).  Default: \"glyphicon glyphicon-minus\" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)\n\nSets the icon to be used on a collapsible tree node.\n\n#### color\nString, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp).  Default: inherits from Bootstrap.css.\n\nSets the default foreground color used by all nodes, except when overridden on a per node basis in data.\n\n#### emptyIcon\nString, class name(s).  Default: \"glyphicon\" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)\n\nSets the icon to be used on a tree node with no child nodes.\n\n#### expandIcon\nString, class name(s).  Default: \"glyphicon glyphicon-plus\" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)\n\nSets the icon to be used on an expandable tree node.\n\n#### loadingIcon\nString, class name(s).  Default: \"glyphicon glyphicon-hourglass\" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)\n\nSets the icon to be used on an a lazyLoad node before its content gets loaded.\n\n#### hierarchicalCheck\nBoolean.  Default: false\n\nWhether or not to enable hierarchical checking/unchecking of checkboxes.\n\n#### propagateCheckEvent\nBoolean.  Default: false\n\nWhether or not to propagate nodeChecked and nodeUnchecked events to the parent/child nodes, used in conjunction with hierarchicalCheck.\n\n#### highlightChanges\nBoolean.  Default: false\nHighlights the nodes with changed checkbox state, used in conjunction with showCheckbox.\n\n#### highlightSearchResults\nBoolean.  Default: true\n\nWhether or not to highlight search results.\n\n#### highlightSelected\nBoolean.  Default: true\n\nWhether or not to highlight the selected node.\n\n#### lazyLoad\nFunction.  Default: undefined\n\nThis function is called when a lazyly-loadable node is being expanded for the first time. The node is available as the first argument, while the second argument is a function responsible for passing the loaded data to the renderer. The data needs to be in the same JSON format as specified above.\n\n#### levels\nInteger. Default: 2\n\nSets the number of hierarchical levels deep the tree will be expanded to by default.\n\n#### multiSelect\nBoolean.  Default: false\n\nWhether or not multiple nodes can be selected at the same time.\n\n#### nodeIcon\nString, class name(s).  Default: \"glyphicon glyphicon-stop\" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)\n\nSets the default icon to be used on all nodes, except when overridden on a per node basis in data.\n\n#### onhoverColor\nString, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp).  Default: '#F5F5F5'.\n\nSets the default background color activated when the users cursor hovers over a node.\n\n#### partiallyCheckedIcon\nString, class names(s).  Default: \"glyphicon glyphicon-expand\" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)\n\nSets the icon to be as a partially checked checkbox, used in conjunction with showCheckbox and hierarchicalCheck.\n\n#### preventUnselect\nBoolean.  Default: false\n\nWhether or not a node can be unselected without another node first being selected.\n\n#### allowReselect\nBoolean.  Default: false\n\nWhether or not a node can be reselected when its already selected, used in conjunction with preventUnselect.\n\n#### selectedIcon\nString, class name(s).  Default: \"glyphicon glyphicon-stop\" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)\n\nSets the default icon to be used on all selected nodes, except when overridden on a per node basis in data.\n\n#### searchResultBackColor\nString, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp).  Default: undefined, inherits.\n\nSets the background color of the selected node.\n\n#### searchResultColor\nString, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp).  Default: '#D9534F'.\n\nSets the foreground color of the selected node.\n\n#### selectedBackColor\nString, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp).  Default: '#428bca'.\n\nSets the background color of the selected node.\n\n#### selectedColor\nString, [any legal color value](http://www.w3schools.com/cssref/css_colors_legal.asp).  Default: '#FFFFFF'.\n\nSets the foreground color of the selected node.\n\n#### showBorder\nBoolean.  Default: true\n\nWhether or not to display a border around nodes.\n\n#### showCheckbox\nBoolean.  Default: false\n\nWhether or not to display checkboxes on nodes.\n\n#### showIcon\nBoolean.  Default: true\n\nWhether or not to display a nodes icon.\n\n#### showImage\nBoolean.  Default: false\n\nWhether or not to display a nodes image instead of the icon.\n\n\n#### showTags\nBoolean.  Default: false\n\nWhether 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.\n\n#### tagsClass\nString, class names(s).  Default: \"badge\"\n\nSets the class of tags\n\n#### uncheckedIcon\nString, class names(s).  Default: \"glyphicon glyphicon-unchecked\" as defined by [Bootstrap Glyphicons](http://getbootstrap.com/components/#glyphicons)\n\nSets the icon to be as an unchecked checkbox, used in conjunction with showCheckbox.\n\n#### wrapNodeText\nBoolean.  Default: false\n\nWhether or not to surround the text of the node with a `\u003cspan class='text'\u003e` tag.\n\n\n## Methods\n\nMethods provide a way of interacting with the plugin programmatically.  For example, expanding a node is possible via the expandNode method.\n\nYou can invoke methods in one of two ways, using either:\n\n#### 1. The plugin's wrapper\n\nThe plugin's wrapper works as a proxy for accessing the underlying methods.\n\n```javascript\n$('#tree').treeview('methodName', args)\n```\n\u003e Limitation, multiple arguments must be passed as an array of arguments.\n\n#### 2. The treeview directly\n\nYou can get an instance of the treeview using one of the two following methods.\n\n```javascript\n// This special method returns an instance of the treeview.\n$('#tree').treeview(true)\n  .methodName(args);\n\n// The instance is also saved in the DOM elements data,\n// and accessible using the plugin's id 'treeview'.\n$('#tree').data('treeview')\n  .methodName(args);\n```\n\u003e A better approach, if you plan a lot of interaction.\n\nIf you intend to make multiple API calls, store a reference to the treeview instance.\n\n```javascript\nvar tree = $('#tree').treeview(true);\ntree.method1(args);\ntree.method2(args);\n```\n\n\n### List of Methods\n\nThe following is a list of all available methods.\n\n\u003e All methods that all declare argument `nodes` will accept either a single node, or an Array of nodes.\n\n#### addNode(nodes, parentNode, index, options)\n\nAdd nodes to the tree.\n\n```javascript\n$('#tree').treeview('addNode', [ nodes, parentNode, index, { silent: true } ]);\n```\n\n\u003e If parentNode evaluates to false, node will be added to root\n\n\u003e If index evaluates to false, node will be appended to the nodes\n\nTriggers `nodeRendered` event; pass silent to suppress events.\n\n#### addNodeAfter(nodes, node, options)\n\nAdd nodes to the tree after given node.\n\n```javascript\n$('#tree').treeview('addNodeAfter', [ nodes, node, { silent: true } ]);\n```\n\n\u003e If node evaluates to false, node will be prepended to the tree's root\n\nTriggers `nodeRendered` event; pass silent to suppress events.\n\n#### addNodeBefore(nodes, node, options)\n\nAdd nodes to the tree before given node.\n\n```javascript\n$('#tree').treeview('addNodeAfter', [ nodes, node, { silent: true } ]);\n```\n\n\u003e If node evaluates to false, node will be appended to the tree's root\n\nTriggers `nodeRendered` event; pass silent to suppress events.\n\n#### checkAll(options)\n\nChecks all tree nodes\n\n```javascript\n$('#tree').treeview('checkAll', { silent: true });\n```\n\nTriggers `nodeChecked` event; pass silent to suppress events.\n\n#### checkNode(nodes, options)\n\nChecks given tree nodes.\n\n```javascript\n$('#tree').treeview('checkNode', [ nodes, { silent: true } ]);\n```\n\nTriggers `nodeChecked` event; pass silent to suppress events.\n\n#### clearSearch()\n\nClear the tree view of any previous search results e.g. remove their highlighted state.\n\n```javascript\n$('#tree').treeview('clearSearch');\n```\n\nTriggers `searchCleared` event\n\n#### collapseAll(options)\n\nCollapse all tree nodes, collapsing the entire tree.\n\n```javascript\n$('#tree').treeview('collapseAll', { silent: true });\n```\n\nTriggers `nodeCollapsed` event; pass silent to suppress events.\n\n#### collapseNode(nodes, options)\n\nCollapse a given tree node and it's child nodes.  If you don't want to collapse the child nodes, pass option `{ ignoreChildren: true }`.\n\n```javascript\n$('#tree').treeview('collapseNode', [ nodes, { silent: true, ignoreChildren: false } ]);\n```\n\nTriggers `nodeCollapsed` event; pass silent to suppress events.\n\n#### disableAll(options)\n\nDisable all tree nodes\n\n```javascript\n$('#tree').treeview('disableAll', { silent: true, keepState: true });\n```\n\nTriggers `nodeDisabled` event; pass silent to suppress events and keepState to keep the expanded/checked/selected state.\n\n#### disableNode(nodes, options)\n\nDisable given tree nodes.\n\n```javascript\n$('#tree').treeview('disableNode', [ nodes, { silent: true, keepState: true } ]);\n```\n\nTriggers `nodeDisabled` event; pass silent to suppress events and keepState to keep the expanded/checked/selected state.\n\n#### enableAll(options)\n\nEnable all tree nodes\n\n```javascript\n$('#tree').treeview('enableAll', { silent: true });\n```\n\nTriggers `nodeEnabled` event; pass silent to suppress events.\n\n#### enableNode(nodes, options)\n\nEnable given tree nodes.\n\n```javascript\n$('#tree').treeview('enableNode', [ nodes, { silent: true } ]);\n```\n\nTriggers `nodeEnabled` event; pass silent to suppress events.\n\n#### expandAll(options)\n\nExpand all tree nodes.  Optionally can be expanded to any given number of levels.\n\n```javascript\n$('#tree').treeview('expandAll', { levels: 2, silent: true });\n```\n\nTriggers `nodeExpanded` event; pass silent to suppress events.\n\n#### expandNode(nodes, options)\n\nExpand given tree nodes.  Optionally can be expanded to any given number of levels.\n\n```javascript\n$('#tree').treeview('expandNode', [ nodes, { levels: 2, silent: true } ]);\n```\n\nTriggers `nodeExpanded` event; pass silent to suppress events.\n\n#### findNodes(pattern, field)\n\nReturns an array of matching node objects.\n\n```javascript\n$('#tree').treeview('findNodes', ['Parent', 'text']);\n```\n\n\u003e Use regular expressions for pattern matching NOT string equals, if you need to match an exact string use start and end string anchors e.g. ^pattern$.\n\n#### getChecked()\n\nReturns an array of checked nodes e.g. state.checked = true.\n\n```javascript\n$('#tree').treeview('getChecked');\n```\n\n#### getCollapsed()\n\nReturns an array of collapsed nodes e.g. state.expanded = false.\n\n```javascript\n$('#tree').treeview('getCollapsed');\n```\n\n#### getDisabled()\n\nReturns an array of disabled nodes e.g. state.disabled = true.\n\n```javascript\n$('#tree').treeview('getDisabled');\n```\n\n#### getEnabled()\n\nReturns an array of enabled nodes e.g. state.disabled = false.\n\n```javascript\n$('#tree').treeview('getEnabled');\n```\n\n#### getExpanded()\n\nReturns an array of expanded nodes e.g. state.expanded = true.\n\n```javascript\n$('#tree').treeview('getExpanded');\n```\n\n#### getNodes()\n\nReturns an array of all initialized nodes.\n\n```javascript\n$('#tree').treeview('getNodes', nodes);\n```\n\n#### getParents(nodes)\n\nReturns parent nodes for given nodes, if valid otherwise returns undefined.\n\n```javascript\n$('#tree').treeview('getParent', nodes);\n```\n\n#### getSelected()\n\nReturns an array of selected nodes e.g. state.selected = true.\n\n```javascript\n$('#tree').treeview('getSelected');\n```\n\n#### getSiblings(nodes)\n\nReturns an array of sibling nodes for given nodes, if valid otherwise returns undefined.\n\n```javascript\n$('#tree').treeview('getSiblings', nodes);\n```\n\n#### getUnchecked()\n\nReturns an array of unchecked nodes e.g. state.checked = false.\n\n```javascript\n$('#tree').treeview('getUnchecked');\n```\n\n#### getUnselected()\n\nReturns an array of unselected nodes e.g. state.selected = false.\n\n```javascript\n$('#tree').treeview('getUnselected');\n```\n\n#### remove()\n\nRemoves the tree view component. Removing attached events, internal attached objects, and added HTML elements.\n\n```javascript\n$('#tree').treeview('remove');\n```\n\n#### removeNode()\n\nRemoves given nodes from the tree.\n\n```javascript\n$('#tree').treeview('removeNode', [ nodes, { silent: true } ]);\n```\n\n#### revealNode(nodes, options)\n\nReveals given tree nodes, expanding the tree from node to root.\n\n```javascript\n$('#tree').treeview('revealNode', [ nodes, { silent: true } ]);\n```\n\nTriggers `nodeExpanded` event; pass silent to suppress events.\n\n#### search(pattern, options)\n\nSearches the tree view for nodes that match a given string, highlighting them in the tree.  \n\nReturns an array of matching nodes.\n\n```javascript\n$('#tree').treeview('search', [ 'Parent', {\n  ignoreCase: true,     // case insensitive\n  exactMatch: false,    // like or equals\n  revealResults: true,  // reveal matching nodes\n}]);\n```\n\nTriggers `searchComplete` event\n\n#### selectNode(nodes, options)\n\nSelects given tree nodes.\n\n```javascript\n$('#tree').treeview('selectNode', [ nodes, { silent: true } ]);\n```\n\nTriggers `nodeSelected` event; pass silent to suppress events.\n\n#### toggleNodeChecked(nodes, options)\n\nToggles a node's checked state; checking if unchecked, unchecking if checked.\n\n```javascript\n$('#tree').treeview('toggleNodeChecked', [ nodes, { silent: true } ]);\n```\n\nTriggers either `nodeChecked` or `nodeUnchecked` event; pass silent to suppress events.\n\n#### toggleNodeDisabled(nodes, options)\n\nToggles a node's disabled state; disabling if enabled, enabling if disabled.\n\n```javascript\n$('#tree').treeview('toggleNodeDisabled', [ nodes, { silent: true } ]);\n```\n\nTriggers either `nodeDisabled` or `nodeEnabled` event; pass silent to suppress events.\n\n#### toggleNodeExpanded(nodes, options)\n\nToggles a node's expanded state; collapsing if expanded, expanding if collapsed.\n\n```javascript\n$('#tree').treeview('toggleNodeExpanded', [ nodes, { silent: true } ]);\n```\n\nTriggers either `nodeExpanded` or `nodeCollapsed` event; pass silent to suppress events.\n\n#### toggleNodeSelected(nodes, options)\n\nToggles a node selected state; selecting if unselected, unselecting if selected.\n\n```javascript\n$('#tree').treeview('toggleNodeSelected', [ nodes, { silent: true } ]);\n```\n\nTriggers either `nodeSelected` or `nodeUnselected` event; pass silent to suppress events.\n\n#### uncheckAll(options)\n\nUncheck all tree nodes.\n\n```javascript\n$('#tree').treeview('uncheckAll', { silent: true });\n```\n\nTriggers `nodeUnchecked` event; pass silent to suppress events.\n\n#### uncheckNode(nodes, options)\n\nUncheck given tree nodes.\n\n```javascript\n$('#tree').treeview('uncheckNode', [ nodes, { silent: true } ]);\n```\n\nTriggers `nodeUnchecked` event; pass silent to suppress events.\n\n#### updateNode(node, newNode, option)\n\nUpdates / replaces a given tree node.\n\n```javascript\n$('#tree').treeview('updateNode', [ node, newNode, { silent: true } ]);\n```\n\nTriggers `nodeRendered` event; pass silent to suppress events.\n\n#### unmarkCheckboxChanges()\n\nMarks all checkboxes as unchanged, removing the highlighted class from each of them.\n\n\n#### unselectNode(nodes, options)\n\nUnselects given tree nodes.\n\n```javascript\n$('#tree').treeview('unselectNode', [ nodes, { silent: true } ]);\n```\n\nTriggers `nodeUnselected` event; pass silent to suppress events.\n\n\n\n## Events\n\nEvents 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.\n\nYou can bind to any event defined below by either using an options callback handler, or the standard jQuery .on method.\n\nExample using options callback handler:\n\n```javascript\n$('#tree').treeview({\n  // The naming convention for callback's is to prepend with `on`\n  // and capitalize the first letter of the event name\n  // e.g. nodeSelected -\u003e onNodeSelected\n  onNodeSelected: function(event, data) {\n    // Your logic goes here\n  });\n```\n\nand using jQuery .on method\n\n```javascript\n$('#tree').on('nodeSelected', function(event, data) {\n  // Your logic goes here\n});\n```\n\n\n### List of Events\n\n#### Lifecycle Events\n\n\u003e Use callback handlers for lifecycle events otherwise you'll miss the events fired during creation.\n\n`loading (event)`  - The tree has initiated data loading.\n\n`loadingFailed (event, error)`  - The tree failed to load data (ajax error)\n\n`initialized (event, nodes)`  - The tree has initialized itself and data ready for rendering.\n\n`nodeRendered (event, node)`  - A new node is rendered;\n\n`rendered (event, nodes)`  - The tree is rendered;\n\n`destroyed (event)`  The tree is being destroyed;\n\n#### State Events\n\n`nodeChecked (event, node)`  - A node is checked.\n\n`nodeCollapsed (event, node)`  - A node is collapsed.\n\n`nodeDisabled (event, node)`  - A node is disabled.\n\n`nodeEnabled (event, node)`  - A node is enabled.\n\n`nodeExpanded (event, node)` - A node is expanded.\n\n`nodeSelected (event, node)`  - A node is selected.\n\n`nodeUnchecked (event, node)`  - A node is unchecked.\n\n`nodeUnselected (event, node)`  - A node is unselected.  \n\n#### Other Events\n\n`searchComplete (event, results)`  - After a search completes\n\n`searchCleared (event, results)`  - After search results are cleared\n\n\u003e All events that emit multiple nodes, do so as an object collection not an array.  This is due to limitations of jQuery in cloning plain JavaScript objects.  If you need to an Array of nodes you'll need to reduce the object back into an array.\n\n\n## Copyright and Licensing\nCopyright 2013 Jonathan Miles\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at \u003chttp://www.apache.org/licenses/LICENSE-2.0\u003e\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly%2Fpatternfly-bootstrap-treeview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatternfly%2Fpatternfly-bootstrap-treeview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternfly%2Fpatternfly-bootstrap-treeview/lists"}