{"id":37405994,"url":"https://github.com/hummingbird-dev/hummingbird-treeview","last_synced_at":"2026-01-16T05:50:13.450Z","repository":{"id":57269612,"uuid":"96119855","full_name":"hummingbird-dev/hummingbird-treeview","owner":"hummingbird-dev","description":"A powerful and fast jQuery treeview plugin","archived":false,"fork":false,"pushed_at":"2022-08-17T12:39:35.000Z","size":1719,"stargazers_count":61,"open_issues_count":18,"forks_count":23,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-10-20T06:50:51.847Z","etag":null,"topics":["javascript","jquery","jquery-plugin","tree","treeview"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hummingbird-dev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-03T14:31:42.000Z","updated_at":"2025-04-15T11:54:48.000Z","dependencies_parsed_at":"2022-09-02T09:50:57.760Z","dependency_job_id":null,"html_url":"https://github.com/hummingbird-dev/hummingbird-treeview","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/hummingbird-dev/hummingbird-treeview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbird-dev%2Fhummingbird-treeview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbird-dev%2Fhummingbird-treeview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbird-dev%2Fhummingbird-treeview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbird-dev%2Fhummingbird-treeview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hummingbird-dev","download_url":"https://codeload.github.com/hummingbird-dev/hummingbird-treeview/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hummingbird-dev%2Fhummingbird-treeview/sbom","scorecard":{"id":473364,"data":{"date":"2025-08-11","repo":{"name":"github.com/hummingbird-dev/hummingbird-treeview","commit":"61c5399ec8e612693d259742b750586ccdf07539"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENCE.txt:0","Info: FSF or OSI recognized license: MIT License: LICENCE.txt:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-19T14:34:40.499Z","repository_id":57269612,"created_at":"2025-08-19T14:34:40.499Z","updated_at":"2025-08-19T14:34:40.499Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28477436,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T03:13:13.607Z","status":"ssl_error","status_checked_at":"2026-01-16T03:11:47.863Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["javascript","jquery","jquery-plugin","tree","treeview"],"created_at":"2026-01-16T05:50:12.780Z","updated_at":"2026-01-16T05:50:13.436Z","avatar_url":"https://github.com/hummingbird-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hummingbird-treeview\n\nA powerful and fast jQuery treeview plugin\n\n#### [View CHANGES.md](https://github.com/hummingbird-dev/hummingbird-treeview/blob/master/CHANGES.md)\n\n## Big Upgrade 2021/06/01\n\nThe hummingbird-treeview has been upgraded extensively. If you have used the treeview only\ninteractively, no changes are needed. However, if you have used it\nprogramatically with respective methods, you have to change your syntax and concept!\n  \nWe now fully support mass assignements, i.e. the methods expect now\narrays of nodes for manipulation. Thus now you can e.g. check many\nnodes simultaneously by simply sending an array of id's to the\nrespective method. The same concept is now valid for all methods.\n\nUnder the hood we have a complete new implementation of the tri-state\nlogic, i.e. setting parent nodes to \"indeterminate\" if at least one,\nbut not all children nodes are checked etc. This speeds up the\nprocessing massively and together with the new array concept makes the\ntreeview super-fast.\n\nThe new functionalities allow new useful methods like e.g. *saveState*\nand *restoreState*, which can be used to permanently save a treeview\nstate (remembering of all checked, unchecked, indeterminate\ncheckboxes) and restore it at any time.\n\nSo then, have fun with the new hummingbird-treeview !\n\n\u003c!--\n## Demo\n\n#### [https://hummingbird-dev.000webhostapp.com](https://hummingbird-dev.000webhostapp.com).\n--\u003e\n\n\n## Features\n\n- Display hierarchical tree structures.\n- Based on simple pseudo HTML lists or full HTML structures.\n- Tri-state logic.\n- Save and restore full treeview state\n- Interactively check, uncheck, collapse, expand.\n- Programmatical mass assignments to check, uncheck, collapse, expand, etc.\n- Supports disabled nodes, checked or unchecked.\n- Get checked/unchecked items programmatically.\n- Hide, show, or add and remove nodes dynamically.\n- Filter nodes.\n- Supports HTML5 data-* attribute to embed custom data.\n- Supports Font Awesome icons.\n- Search function.\n- ... and much more\n\n## Dependencies\n\n- jQuery v3.1.1 \n- font-awesome v4.7.0 and font-awesome v5.8.1\n\nThe hummingbird-treeview is tested with these versions, other versions work most probably as well.\n\n## Example \n\n![alt text](./treeview_anim.gif \"hummingbird-treeview example animation\")\n\n\n## Getting started\n\n\n### Installation\n\nInstall via npm\n\n``` shell\n\n$ npm i hummingbird-treeview\n\n```\n\nor download manually here on GitHub or integrate via CDNs (see below).\n\n\n### Usage\n\nAdd the following resources for the hummingbird-treeview to function correctly:\n\n```html\n\t\n    \u003c!-- Required Stylesheets --\u003e\n    \u003clink href=\"/path/to/font-awesome.css\" rel=\"stylesheet\"\u003e\n    \u003clink href=\"/path/to/hummingbird-treeview.min.css\" rel=\"stylesheet\"\u003e\n\n    \u003c!-- Required Javascript --\u003e\n    \u003cscript src=\"/path/to/jquery.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/path/to/hummingbird-treeview.min.js\"\u003e\u003c/script\u003e\n\n```\nOr integrate the resources via CDNs:\n\n### Important: newest release is v3.0.5 !!!\n\n```html\n\t\n    \u003c!-- Required Stylesheets --\u003e\n    \u003clink href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\" rel=\"stylesheet\"\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/gh/hummingbird-dev/hummingbird-treeview@v3.0.5/hummingbird-treeview.min.css\" rel=\"stylesheet\"\u003e\n\n    \u003c!-- Required Javascript --\u003e\n    \u003cscript src=\"https://code.jquery.com/jquery-3.4.1.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/hummingbird-dev/hummingbird-treeview@v3.0.5/hummingbird-treeview.min.js\"\u003e\u003c/script\u003e\n\n```\n\nor include font-awesome v5.8.1 instead of font-awesome v4.7.0:\n\n```html\n\t\u003clink rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.8.1/css/all.css\"\u003e\n```\n\n\n\nThe treeview input data can have two different formats, a very simple\npseudo HTML list or a real HTML list structure. The simple pseudo HTML\nlist can be extended with height and scroll options as well as id and\ndata-id attributes, thus essentially we have three different ways to\nembed the treeview data into the page.\n\n### 1. Simple pseudo HTML\n\n``` html\n\n     \u003cdiv class=\"hummingbird-treeview-converter\"\u003e\n        \u003cli\u003eWarner Bros.\u003c/li\u003e\n        \u003cli\u003e-Goodfellas\u003c/li\u003e\n        \u003cli\u003e--Robert De Niro\u003c/li\u003e\n        \u003cli\u003e--Joe Pesci\u003c/li\u003e\n        \u003cli\u003e-The Shawshank Redemption\u003c/li\u003e\n        \u003cli\u003e--Tim Robbins\u003c/li\u003e\n        \u003cli\u003e--Morgan Freeman\u003c/li\u003e\n        \u003cli\u003eParamount\u003c/li\u003e\n        \u003cli\u003e-The Untouchables\u003c/li\u003e\n        \u003cli\u003e--Robert De Niro\u003c/li\u003e\n        \u003cli\u003e--Kevin Costner\u003c/li\u003e\n        \u003cli\u003e-Forrest Gump\u003c/li\u003e\n        \u003cli\u003e--Tom Hanks\u003c/li\u003e\n        \u003cli\u003e--Robin Wright\u003c/li\u003e\n     \u003c/div\u003e\n\t\n```\n\nThe hyphens indicate the level of indenting. It is important to note\nthat down the tree the next node can maximal be indented by one level,\ni.e. it can only have one hyphen more than the node before (e.g. from\nGoodfellas to Robert De Niro). In contrast up the treeview,\narbitrarily large jumps of indention are possible, i.e. the next node\ncan have much less hyphens than the node before (e.g. from Morgan Freeman to Paramount).\n\nInternally this pseudo HTML list is converted to a real HTML\nstructure. The treeview is embedded into a ```\u003cdiv\u003e``` container with\nid=\"treeview_container\". The treeview itself is given the\nid=\"treeview\". The unique ids of the items/nodes (Warner Bros.,\nGoodfellas, ...) follow this schema: id=\"hum_1\", id=\"hum_2\", etc. The\ndata-ids are given the name of the nodes, i.e. data-id=\"Warner Bros.\",\ndata-id=\"Goodfellas\", etc. \n\nSet options, e.g.: (detailed description of all options below)\n\n```javascript\n\n$.fn.hummingbird.defaults.collapsedSymbol = \"fa-arrow-circle-o-right\";\n$.fn.hummingbird.defaults.expandedSymbol = \"fa-arrow-circle-o-down\";\n$.fn.hummingbird.defaults.checkDoubles = true; \n...\n\n```\n\nFor using Font-Awesome 5.* add *SymbolPrefix=\"fas\"* or *SymbolPrefix=\"far\"*. Use e.g.\n\n```javascript\n$.fn.hummingbird.defaults.SymbolPrefix = \"fas\";\n$.fn.hummingbird.defaults.collapsedSymbol = \"fa-hand-point-right\";\n$.fn.hummingbird.defaults.expandedSymbol = \"fa-hand-point-down\";\n...\n\n```\n\n\nInitialize hummingbird-treeview within a $(document).ready() block:\n\n```javascript\n$(document).ready(function() {\n\n  $(\"#treeview\").hummingbird();\n\n})\n\n```\n\nCongratulations, you are done, your pseudo HTML list has now treeview functionality.\n\n### Multiple treeviews on one page\n\nUsing the simple pseudo HTML list with the\n*class=\"hummingbird-treeview-converter\"* the id of the treeview will\nbe automatically set to *\"treeview\"*. Additional pseudo HTML lists on\nthe same page will receive the ids *treeview2*, *treeview3*,\netc. Similar to above the unique ids of the items/nodes now follow the\nschema: id=\"hum2_1\", id=\"hum2_2\", ... for the second treeview,\nid=\"hum3_1\", id=\"hum3_2\", ... for the third treeview, etc. Thus\ninitialization of every treeview is needed. Options can be set before each initialization.\n\n```javascript\n\n$(\"#treeview\").hummingbird();\n\n$.fn.hummingbird.defaults.checkboxesGroups= \"disabled\";\n$(\"#treeview2\").hummingbird();\n\n$.fn.hummingbird.defaults.checkboxesGroups= \"enabled\";\n$(\"#treeview3\").hummingbird();\n...\n\n```\n\n\n\n### 2. Simple pseudo HTML plus height, scroll, id, data-id, data-css, data-str, data-nonHoverColor, data-nonHoverColor_bg, data-HoverColor, data-HoverColor_bg\n\n``` html\n\n     \u003cdiv class=\"hummingbird-treeview-converter\" data-height=\"100%\" \n\t data-scroll=\"false\" data-id=\"_movies\" data-css=\"overflow-x:scroll; background-color:coral;\"\u003e\n        \u003cli id=\"item_1\" data-id=\"Studio_1\"\u003eWarner Bros.\u003c/li\u003e\n        \u003cli id=\"item_2\" data-id=\"Movie_1\"\u003e-Goodfellas\u003c/li\u003e\n        \u003cli id=\"item_3\" data-id=\"Actor_1\" data-nonHoverColor=\"#25610b\" data-nonHoverColor_bg=\"yellow\" data-HoverColor=\"red\" data-HoverColor_bg=\"blue\"\u003e--Robert De Niro\u003c/li\u003e\n        \u003cli id=\"item_4\" data-id=\"Actor_2\"\u003e--Joe Pesci\u003c/li\u003e\n        \u003cli id=\"item_5\" data-id=\"Movie_2\"\u003e-The Shawshank Redemption\u003c/li\u003e\n        \u003cli id=\"item_6\" data-id=\"Actor_3\"\u003e--Tim Robbins\u003c/li\u003e\n        \u003cli id=\"item_7\" data-id=\"Actor_4\"\u003e--Morgan Freeman\u003c/li\u003e\n        \u003cli id=\"item_8\" data-id=\"Studio_2\"\u003eParamount\u003c/li\u003e\n        \u003cli id=\"item_9\" data-id=\"Movie_3\" data-str='data-toggle=\"tooltip\" data-placement=\"auto\" title=\"1987\"' \u003e-The Untouchables\u003c/li\u003e\n        \u003cli id=\"item_10\" data-id=\"Actor_1\"\u003e--Robert De Niro\u003c/li\u003e\n        \u003cli id=\"item_11\" data-id=\"Actor_5\"\u003e--Kevin Costner\u003c/li\u003e\n        \u003cli id=\"item_12\" data-id=\"Movie_4\"\u003e-Forrest Gump\u003c/li\u003e\n        \u003cli id=\"item_13\" data-id=\"Actor_6\"\u003e--Tom Hanks\u003c/li\u003e\n        \u003cli id=\"item_14\" data-id=\"Actor_7\"\u003e--Robin Wright\u003c/li\u003e\n     \u003c/div\u003e\n\t\n```\n\nSet the height of the treeview element \"relative\" with\n*data-height=\"100%\"* or \"absolute\" with *data-height=\"350px\"* and make\nit fully scrollable with *data-scroll=\"true\"*. Use *data-css* to\ninject arbitrary CSS for the treeview.  \nAdditionally it is possible to customize individual nodes, e.g.  set\ncustom ids and data-ids. Set a data-id (e.g. to \"_movies\") to the div\nclass=\"hummingbird-treeview-converter\" to address the treeview via the\nid \"treeview_movies\". Leave it empty to use the standard id\n\"treeview\".  The example above uses a dynamical (relative) height and\nonly scolling in x direction.  Add more custom functionality to the\nnodes by injecting the \"data-str\", see node \"The Untouchables\" above.\nThe \"data-str\" has custom commands enclosed in single quotes, which\ncan be used e.g. by other JavaScript methods.  In this example we use\nBootstraps tool-tips to show the production year of the movie in a\ntool-tip. It's also possible to include CSS styles,\ne.g. *data-str='style=\"text-decoration:underline;\"'*. However, note\nthat this does not work with\ntext colors and background colors. Because those change\ndynamically on hover. Therefore use *data-nonHoverColor,\ndata-nonHoverColor_bg, data-HoverColor, data-HoverColor_bg* as in the\nexample above with \"Robert De Niro\". Note that these options don't\nwork with *hoverMode=\"bootstrap\"*, only with the default hoverMode,\ni.e. *hoverMode=\"html\"*\n\n\nSet options, e.g.: (detailed description of all options below)\n\n```javascript\n\n$.fn.hummingbird.defaults.collapsedSymbol= \"fa-arrow-circle-o-right\";\n$.fn.hummingbird.defaults.expandedSymbol= \"fa-arrow-circle-o-down\";\n$.fn.hummingbird.defaults.checkDoubles= true; \n...\n\n```    \n\nInitialize hummingbird-treeview:\n\n```javascript\n\n$(\"#treeview_movies\").hummingbird();\n\n```\n\nOr if you have left the data-id of the div class=\"hummingbird-treeview-converter\" empty use the standard initialization:\n\n```javascript\n\n$(\"#treeview\").hummingbird();\n\n```\n\n\n\nCongratulations, you are done, your pseudo HTML list has now treeview functionality.\n\n### 3. Full HTML structure\n\nCreate treeview structure/data:\n\n```html\n\n    \u003cdiv id=\"treeview_container\" class=\"hummingbird-treeview\" style=\"height: 230px; overflow-y: scroll;\"\u003e\n    \t\u003cul id=\"treeview\" class=\"hummingbird-base\"\u003e\n\t    \u003cli data-id=\"0\"\u003e\n\t\t\u003ci class=\"fa fa-plus\"\u003e\u003c/i\u003e\n\t\t\u003clabel\u003e\n\t\t    \u003cinput id=\"xnode-0\" data-id=\"custom-0\" type=\"checkbox\" /\u003e node-0\n\t\t\u003c/label\u003e\n\t\t\u003cul\u003e\n\t\t    \u003cli data-id=\"1\"\u003e\n\t\t\t\u003ci class=\"fa fa-plus\"\u003e\u003c/i\u003e\n\t\t\t\u003clabel\u003e\n\t\t\t    \u003cinput  id=\"xnode-0-1\" data-id=\"custom-0-1\" type=\"checkbox\" /\u003e node-0-1\n\t\t\t\u003c/label\u003e\n\t\t\t\u003cul\u003e\n\t\t\t    \u003cli\u003e\n\t\t\t\t\u003clabel\u003e\n\t\t\t\t    \u003cinput class=\"hummingbird-end-node\" id=\"xnode-0-1-1\" data-id=\"custom-0-1-1\" type=\"checkbox\" /\u003e node-0-1-1\n\t\t\t\t\u003c/label\u003e\n\t\t\t    \u003c/li\u003e\n\t\t\t    \u003cli\u003e\n\t\t\t\t\u003clabel\u003e\n\t\t\t\t    \u003cinput class=\"hummingbird-end-node\" id=\"xnode-0-1-2\" data-id=\"custom-0-1-2\" type=\"checkbox\" /\u003e node-0-1-2\n\t\t\t\t\u003c/label\u003e\n\t\t\t    \u003c/li\u003e\n\t\t\t\u003c/ul\u003e\n\t\t    \u003c/li\u003e\n\t\t    \u003cli data-id=\"1\"\u003e\n\t\t\t\u003ci class=\"fa fa-plus\"\u003e\u003c/i\u003e\n\t\t\t\u003clabel\u003e\n\t\t\t    \u003cinput  id=\"xnode-0-2\" data-id=\"custom-0-2\" type=\"checkbox\" /\u003e node-0-2\n\t\t\t\u003c/label\u003e\n\t\t\t\u003cul\u003e\n\t\t\t    \u003cli\u003e\n\t\t\t\t\u003clabel\u003e\n\t\t\t\t    \u003cinput class=\"hummingbird-end-node\" id=\"xnode-0-2-1\" data-id=\"custom-0-2-1\" type=\"checkbox\" /\u003e node-0-2-1\n\t\t\t\t\u003c/label\u003e\n\t\t\t    \u003c/li\u003e\n\t\t\t    \u003cli\u003e\n\t\t\t\t\u003clabel\u003e\n\t\t\t\t    \u003cinput class=\"hummingbird-end-node\" id=\"xnode-0-2-2\" data-id=\"custom-0-2-2\" type=\"checkbox\" /\u003e node-0-2-2\n\t\t\t\t\u003c/label\u003e\n\t\t\t    \u003c/li\u003e\n\t\t\t\u003c/ul\u003e\n\t\t    \u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t    \u003c/li\u003e\n\t\u003c/ul\u003e\n    \u003c/div\u003e\n\n```\n\nUse here exactly the *class=\"fa fa-plus\"* and change Symbols via the options functionality.\nThe *data-id* of the group `\u003cli\u003e` tags indicates the level or depth of that group. It starts at 0. This is\nneeded for the option *singleGroupOpen*.\n\nOnly change the following:\n### Treeview structure and node properties\n\n- **div id**\u003cbr\u003e\n  The `\u003cdiv id=\"treeview_container\"` ... can be chosen arbitrarily, but of course must be referred to consistently.\n  \n- **ul id**\u003cbr\u003e\nThe `\u003cul id=\"treeview\"` ... can be chosen.\n\n- **ul class=\"hummingbird-base\"**\u003cbr\u003e\nThe base `ul` must be assigned to the \"hummingbird-base\" class: `\u003cul id=\"treeview\" class=\"hummingbird-base\"\u003e`\n\n- **input id's and data-id's**\u003cbr\u003e\n  The input id's and data-id's\n  e.g. `\u003cinput id=\"xnode-0\" data-id=\"custom-0\"` ... can be set. The\n  data-id can be any text. \n\n- **input class=\"hummingbird-end-node\"**\u003cbr\u003e\n  Add this to every node, which is\n  not a parent, i.e. which has no children or nodes below.\n  \nDo not change the \"fa fa-plus\", do this via the options (see below).\n\nChange **font-size**, **line-height**, checkbox **width** and\n**height** directly in the hummingbird-treeview.css. Additionally, the\n**hummingbird-base** class disables line breaks of nodes. To change\nthat, edit again directly the hummingbird-treeview.css.\n\n## Options\nAs you have seen above, options can be adjusted by calling\n\n```javascript\n\n$.fn.hummingbird.defaults.option= value;\n\n```\n\nFollowing options are available:\n\n- **SymbolPrefix**\u003cbr\u003e \n  String, set this to \"fas\" or \"far\" if you are\n  using Font-Awesome 5.*.  Note that the modes \"fas\" and \"far\" cannot\n  be mixed for the collapsed and expanded symbols. Only one mode for all is supported.\n\n- **collapsedSymbol**\u003cbr\u003e\n  String, default=\"fa-plus\". This can be any icon\n  from the \u003ca href=\"http://fontawesome.io/icons/\"\u003eFont Awesome\u003c/a\u003e icons.\n\n- **expandedSymbol**\u003cbr\u003e\n  String, default=\"fa-minus\". This can be any icon\n  from the \u003ca href=\"http://fontawesome.io/icons/\"\u003eFont Awesome\u003c/a\u003e icons.\n\n- **collapseAll**\u003cbr\u003e\n  Boolean, default=true. On initialization, all\n  nodes are collapsed. Change this to false to expand the nodes on initialisation.\n\n- **checkboxes**\u003cbr\u003e\n  String, default=\"enabled\". Checkboxes are used per\n  default. Set this to \"disabled\" to get a\n  treeview without checkboxes.\n\n- **checkboxesGroups**\u003cbr\u003e String, default=\"enabled\". Set this to\n  \"disabled\" to disable all checkboxes from nodes that are parents,\n  i.e. which have child nodes.  Set this to \"disabled_grayed\" to also\n  apply a \"grayed\" font color to the node text. Note that disabling\n  parent nodes means that they are not clickable, but still provide\n  tri-state functionality. Thus, if a child of a disabled parent has\n  been checked, the parent node is set to the indeterminate state to\n  indicate that a child has been checked.\n\n- **singleGroupOpen**\u003cbr\u003e Integer, default=-1. Set this to an integer greater -1 to\n  enable the functionality to allow only one group of a defined level to be opened at a time. \n  The number provided defines the level to which the function should be applied (starting at 0).\n  For instance, if *singleGroupOpen=0* (which is the typical used level) it means that at level 0 of the tree\n  only one group can be opened at a time. As soon as another group of this level is opened, \n  all others will be closed.\n\n- **hoverItems**\u003cbr\u003e Boolean, true or false. This option enables a visual mouse hover effect, i.e. on hover on an item the background color\n  of this item is changed and also the text color is changed. The default colors for background and text on hover are \"#6c757c\" and \"white\".\n  And \"white\" and \"black\" on non hover.\n  \n- **hoverColorBg1**\u003cbr\u003e This relates to the **hoverItems** option and\n  sets the background color on hover, default is \"#6c757c\". It accepts\n  html color names, HEX or RGB (e.g. \"rgb(255,0,0)\").\n\n- **hoverColorBg2**\u003cbr\u003e Same as above for non hover. Default \"white\".\n\n- **hoverColorText1**\u003cbr\u003e Set text color on hover, default is \"white\".\n\n- **hoverColorText2**\u003cbr\u003e Set text color on non hover, default is \"black\".\n\n- **hoverMode**\u003cbr\u003e This options relates as well to the **hoverItems**\n\toption. Default is the string \"html\". If this is set to \"bootstrap\", bootstrap colors can be used. Be\n\taware that this only works if you have included the bootstrap\n\tlibraries in your sourcecode. For setting the colors you have to use the option below.\n\t\n- **hoverColorBootstrap**\u003cbr\u003e  Default is \"bg-secondary text-white\". Use any bootstrap color for bg and text.\n\n- **clickGroupsToggle**\u003cbr\u003e String, default=\"disabled\". Set this to \"enabled\"\n   to add collapse and expand functionality to a click on a parent node name.\n\n\n## More data-* attributes\n\n- **data-boldParents=\"true\"**\u003cbr\u003e  Changes the font of all parent nodes to bold font.\n\n``` html\n\n     \u003cdiv class=\"hummingbird-treeview-converter\" data-height=\"230px\" \n\t data-scroll=\"true\" data-id=\"_movies\" data-boldParents=\"true\"\u003e\n        \u003cli id=\"item_1\" data-id=\"Studio_1\"\u003eWarner Bros.\u003c/li\u003e\n\t\t...\n```\n\n- **data-str**\u003cbr\u003e  Add custom functionality to a node.\n\n``` html\n\n     \u003cdiv class=\"hummingbird-treeview-converter\" data-height=\"230px\" \n\t data-scroll=\"true\" data-id=\"_movies\"\u003e\n        \u003cli id=\"item_8\" data-id=\"Studio_2\"\u003eParamount\u003c/li\u003e\n        \u003cli id=\"item_9\" data-id=\"Movie_3\" data-str='data-toggle=\"tooltip\" data-placement=\"auto\" title=\"1987\"' \u003e-The Untouchables\u003c/li\u003e\n        \u003cli id=\"item_10\" data-id=\"Actor_1\"\u003e--Robert De Niro\u003c/li\u003e\n        \u003cli id=\"item_11\" data-id=\"Actor_5\"\u003e--Kevin Costner\u003c/li\u003e\n     \u003c/div\u003e\n\n```\n\nAdd more custom functionality to the nodes by injecting the \"data-str\", see node \"The Untouchables\" above.\nThe \"data-str\" has custom commands enclosed in single quotes, which can be used e.g. by other JavaScript methods.\nIn this example we use Bootstraps tool-tips to show the production year of the movie in a tool-tip.\n\n\n\n\n## Add on options and functionality\nCombining different options, methods, events and using additional logic, advanced \ntreeview functionalities can be achieve.\n\n- **Pre-check**\u003cbr\u003e\n  Pre-check some nodes by adding \"id's\" or \"data-id's\" to the items, e.g. \n  ```html\n\n\t\t...\n        \u003cli data-id=\"1\"\u003e--Morgan Freeman\u003c/li\u003e\n        \u003cli\u003eParamount\u003c/li\u003e\n        \u003cli\u003e-The Untouchables\u003c/li\u003e\n        \u003cli\u003e--Robert De Niro\u003c/li\u003e\n        \u003cli data-id=\"2\"\u003e--Kevin Costner\u003c/li\u003e\n\t\t...\n\t\n  ```\n Then add the following snippet after treeview initialization:\n \n ```javascript\n  \n\tvar pre_check = [1,2];\n\t$(\"#treeview\").hummingbird(\"checkNode\",{sel:\"data-id\",vals: pre_check});\n\n\t\n ```\n \n\n- **select-single-node**\u003cbr\u003e For some applications it makes sense to\n  allow only to select one single node. Therefore we first disable\n  checking of folders, i.e. parent nodes using the respective option\n  before initializing the treeview.  On the *CheckUncheckDone* event\n  we uncheck all previously selected nodes, initialize the *List*\n  again and get again the checked node. It's important to use the\n  *skipCheckUncheckDone* method prior to unchecking, to prevent the\n  event to be fired on the unchecking.\n  \n\n  \n```javascript\n$.fn.hummingbird.defaults.checkboxesGroups= \"disabled\";\n$(\"#treeview\").hummingbird();\n\nvar List = {\"id\" : [], \"dataid\" : [], \"text\" : []};\n$(\"#treeview\").on(\"CheckUncheckDone\", function(){\n   //uncheck all previously selected nodes\n   if (List.id != \"\") {\n\t   $(\"#treeview\").hummingbird(\"skipCheckUncheckDone\");\n\t   $(\"#treeview\").hummingbird(\"uncheckNode\",{sel:\"id\",vals:[List.id]});\n   }\n   //initialize List freshly\n   List = {\"id\" : [], \"dataid\" : [], \"text\" : []};\n   //get all checked nodes\n   $(\"#treeview\").hummingbird(\"getChecked\",{list:List,onlyEndNodes:true});\n});\n\n```\n  \n- **select-single-group**\u003cbr\u003e  \n  This functionality is in an experimental state, I've tested it not fully, thus please be aware.\n  This add on functionality can be used to allow selected nodes only within one group. You can select whole groups or\n  nodes within groups, but not end-nodes across groups. The approach is to store all selected nodes in and below the group, where\n  the last node was selected. Then uncheck all nodes and following again check all the before stored nodes in that group and below.\n  \n\n\n```javascript\nvar ListGroup = {\"id\" : [], \"dataid\" : [], \"text\" : []};\nvar ListGroupOld = {};\nvar List = {\"id\" : [], \"dataid\" : [], \"text\" : []};\n\n$(\"#treeview\").on(\"CheckUncheckDone\", function(){\n   //get all checked nodes below this one\n   $(\"#treeview\").hummingbird(\"getChecked\",{list:ListGroup,onlyEndNodes:true,onlyParents:false,fromThis:true});\n   //console.log(ListGroup)\n   ListGroupOld = ListGroup;\n\n   if (List.id != \"\") {\n\t   $(\"#treeview\").hummingbird(\"skipCheckUncheckDone\");\n\t   $(\"#treeview\").hummingbird(\"uncheckNode\",{sel:\"id\",vals:[List.id]});\n   }\n   //initialize List freshly\n   List = {\"id\" : [], \"dataid\" : [], \"text\" : []};\n   ListGroup = {\"id\" : [], \"dataid\" : [], \"text\" : []};\n   //get all checked nodes\n   $(\"#treeview\").hummingbird(\"getChecked\",{list:List,onlyEndNodes:true,onlyParents:false,fromThis:false});\n   $(document).trigger('reCheckGroup');\n});\n\n$(document).on(\"reCheckGroup\", function(){\n   //check all from group\n   if (ListGroupOld.id != \"\") {\n\t   $(\"#treeview\").hummingbird(\"checkNode\",{sel:\"id\",vals:[ListGroupOld.id]});\n   }\n});\n\t\n\n```\n\n\n\n## Methods\nMethods are used to interact with the treeview programmatically. Following methods are available:\n\n- **checkAll()**\u003cbr\u003e\n  Checks all nodes including full support for disabled nodes.\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"checkAll\");\n\n```\n\n- **uncheckAll()**\u003cbr\u003e\n  Unchecks all nodes including full support for disabled nodes.\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"uncheckAll\");\n\n```\n\n- **collapseAll()**\u003cbr\u003e\n  Collapses all nodes.\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"collapseAll\");\n\n```\n\n- **expandAll()**\u003cbr\u003e\n  Expands all nodes.\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"expandAll\");\n\n```\n\n- **checkNode(sel, vals)**\u003cbr\u003e\n  This method checks nodes. *sel* must be either\n  \"id\", \"data-id\" or \"text\" to define the selector. \n  *vals* is an array containing the respective nodes.\n\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"checkNode\",{sel:\"id\", vals:[\"hum_1\",\"hum_2\",\"hum_3\"]});\n$(\"#treeview\").hummingbird(\"checkNode\",{sel:\"text\", vals:[\"Goodfellas\",\"Tom Hanks\"]});\n\n```\n\n- **uncheckNode(sel, vals)**\u003cbr\u003e\n  This method unchecks nodes. *sel* must be either\n  \"id\", \"data-id\" or \"text\" to define the selector. \n  *vals* is an array containing the respective nodes.\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"uncheckNode\",{sel:\"id\", vals:[\"hum_1\",\"hum_2\",\"hum_3\"]});\n$(\"#treeview\").hummingbird(\"uncheckNode\",{sel:\"text\", vals:[\"Goodfellas\",\"Tom Hanks\"]});\n\n\n```\n\n- **expandNode(sel,vals,{expandParents})**\u003cbr\u003e\n  Expand nodes, which are identified by their\n  id's or data-id's, which has to be defined in\n  the *sel* parameter. The *vals* array\n  holds the names of the id's or data-id's. Set\n  optionally expandParents to false, if the\n  parents of this node should not be\n  expanded. Default of expandParents is\n  true.\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"expandNode\",{sel:\"id\",vals:[\"hum_5\",\"hum_14\"],expandParents:true});\n\n```\n\n- **collapseNode(sel,vals,{collapseChildren})**\u003cbr\u003e\n  Collapses nodes, which are identified by their\n  id's or data-id's, which have to be defined in\n  the *sel* parameter. The *vals* array\n  holds the names of the id's or data-id's. Set\n  optionally collapseChildren to false, if the\n  children of this node should not be\n  collapsed. Default of collapseChildren is\n  true.\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"collapseNode\",{sel:\"id\",vals:[\"hum_2\",\"hum_15\"],collapseChildren:true});\n\n```\n\n- **disableToggle(attr,name)**\u003cbr\u003e\n  Disables expand and collapse functionality of nodes, which are identified by their\n  id's, data-id's or text which have to be defined in\n  the *sel* parameter. The *vals* array\n  holds the names of the id's or data-id's. \n\n```javascript\n\n$(\"#treeview\").hummingbird(\"disableToggle\",{sel:\"id\",vals:[\"hum_12\",\"hum_15\"]});\n\n```\n\n\n- **disableNode(sel,vals,state,{disableChildren})**\u003cbr\u003e Disables \n  nodes, which are identified by their id's, data-id's or text, which has to be\n  defined in the *sel* parameter. The *vals* array holds the names of\n  the id's, data-id's or text's.  Set state to true if the nodes should be disabled\n  and checked, set it to false if the nodes should be disabled and\n  unchecked. Optionally set disableChildren to false or true, default\n  is true. \n\n```javascript\n\n$(\"#treeview\").hummingbird(\"disableNode\",{sel:\"id\",vals: [\"hum_5\", \"hum_13\", \"hum_14\", \"hum_15\"],state:false,disableChildren:true});\n\n```\n\n- **enableNode(sel,vals,state,{enableChildren})**\u003cbr\u003e Enables \n  former disabled nodes, which are identified by their id's, data-id's or text,\n  which has to be defined in the *sel* parameter. The *vals* array\n  holds the names of the id's, data-id's, or texts.  Set state to true if the nodes\n  should be enabled and checked, set it to false if the nodes should be\n  enabled and unchecked. Optionally set enableChildren to false or\n  true, default is true. \n\n```javascript\n\n$(\"#treeview\").hummingbird(\"enableNode\",{sel:\"id\",vals: [\"hum_5\", \"hum_13\", \"hum_14\", \"hum_15\"],state:false,enableChildren:true});\n\n```\n\n- **hideNode(sel,vals)**\u003cbr\u003e Hide nodes, which are identified by their id's, data-id's or text,\n  which has to be defined in the *sel* parameter. The *vals* array\n  holds the names of the id's, data-id's, or text. \n\n```javascript\n\n$(\"#treeview\").hummingbird(\"hideNode\",{sel:\"id\",vals: [\"hum_5\",\"hum_6\"]});\n\n```\n\n- **showNode(sel,vals)**\u003cbr\u003e Show previously hidden nodes, which are\n  identified by their id's, data-id's or text, which has to be defined in\n  the *sel* parameter. The *vals* array holds the names of the id's,\n  data-id's, or text. \n\n```javascript\n\n$(\"#treeview\").hummingbird(\"showNode\",{sel:\"id\",vals: [\"hum_5\",\"hum_6\"]});\n\n```\n\n- **disableParentNodeOnCollapse(sel,vals,{state})**\u003cbr\u003e As long as the\n  node is collapsed, it is disabled, and as soon as the node is\n  expanded, the node will be enabled. If state=false this function\n  will be disabled on that node. Default is state=true.\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"disableParentNodeOnCollapse\",{sel:\"id\",vals: [\"hum_5\",\"hum_6\"],state:true});\n\n```\n\n\n- **addNode(pos,anchor_sel,anchor_vals,text,the_id,data_id,{end_node,children})**\u003cbr\u003e All parameters are arrays. Add nodes at pos = \n  ['before','before','after'...] already existing\n  nodes. The existing nodes are called here *anchor*. To identify the\n  anchor nodes define the *anchor_sel* as id, data-id or text. The \n  parameter *anchor_vals* are then the respective names of the *anchor_sel*. \n  Next define the *text* of the new nodes, the new id's (*the_id*) and the new *data_id's*.\n  Note that we use *data-id* with hyphen and *data_id* with underscore. By default a \n  *hummingbird-end-node* is added, i.e. *end_node:true*, shown below. IMPORTANT: The treeview must be initialized again after adding nodes.\n\n```javascript\n\n$(\"#treeview\").hummingbird('addNode',{pos:['after','after'],anchor_sel:['text','id'],anchor_vals:['node-0-1-1-2','hum_5'],\ntext:['New Node1','New Node2'],the_id:['new_id1','new_id2'],data_id:['new_data_id1','new_data_id2']});\n\n$(\"#treeview\").hummingbird();\n\n```\n\n  If you want to add a node including children, *end_node* must be set to *false* and \n  an array containing children objects must be passed to the method with name *children*:\n  In this example we create two new nodes each having two children.\n\n\n```javascript\n\nvar new_children = [\n    [\n\t\t{id:'n1_child1',data_id:'n1_child1',text:'n1_child1'},\n\t\t{id:'n1_child2',data_id:'n1_child2',text:'n1_child2'},\n    ],\n    [\n\t\t{id:'n2_child1',data_id:'n2_child1',text:'n2_child1'},\n\t\t{id:'n2_child2',data_id:'n2_child2',text:'n2_child2'},\t\t\t \n    ]\n];\n\n$(\"#treeview\").hummingbird('addNode',{pos:[\"before\",\"after\"],anchor_sel:[\"text\",\"text\"],anchor_vals:[\"Goodfellas\",\"Paramount\"],text:[\"new_node_1\",\"new_node_2\"],the_id:[\"new_node_1\",\"new_node_2\"],data_id:[\"new_node_1\",\"new_node_2\"],end_node:false,children:new_children});\n\n$(\"#treeview\").hummingbird();\n\n```\n\u003c!--   Finally it is important to initialise the treeview again after adding nodes. --\u003e\n\u003c!--   In the case you want to add a parent node, which contains again parent nodes,  --\u003e\n\u003c!--   create first the parent node with a *hummingbird-end-node* child as above. Then --\u003e\n\u003c!--   add the next parent to the created *hummingbird-end-node* and finally remove the  --\u003e\n\u003c!--   *hummingbird-end-node* node: --\u003e\n  \n\u003c!-- ```javascript --\u003e\n\n\u003c!-- var children = { --\u003e\n\u003c!--    child1: {id:'child1',data_id:'child1',text:'child1'}, --\u003e\n\u003c!-- }; --\u003e\n\n\u003c!-- $(\"#treeview\").hummingbird('addNode',{pos:'before',anchor_attr:'text',anchor_name:'Joe Pesci', --\u003e\n\u003c!-- text:'Ray Liotta',the_id:'Ray',data_id:'Ray',end_node:false,children:children}); --\u003e\n\n\u003c!-- $(\"#treeview\").hummingbird(); --\u003e\n\n\u003c!-- var children = { --\u003e\n\u003c!--    child2: {id:'child2',data_id:'child2',text:'child2'}, --\u003e\n\u003c!--    child3: {id:'child3',data_id:'child3',text:'child3'}, --\u003e\n\u003c!-- }; --\u003e\n\t\t \n\u003c!-- $(\"#treeview\").hummingbird('addNode',{pos:'after',anchor_attr:'text',anchor_name:'child1', --\u003e\n\u003c!-- text:'child1',the_id:'child1x',data_id:'child1x',end_node:false,children}); --\u003e\n\t\t \n\u003c!-- $(\"#treeview\").hummingbird(); --\u003e\n\n\u003c!-- $(\"#treeview\").hummingbird('removeNode',{attr:'id',name:'child1'}); --\u003e\n\n\u003c!-- $(\"#treeview\").hummingbird(); --\u003e\n\n\u003c!-- ``` --\u003e\n    \n  Warning: Be careful by using URL query parameters, cookies, \n  or form inputs to create nodes, because this can introduce cross-site-scripting (XSS) \n  vulnerabilities. Remove or escape any user input before adding content to the document. \n \n \n- **removeNode(sel,vals)**\u003cbr\u003e Remove a node, which is identified by \n   *sel* equal id, data-id, or text. \n   \n\n```javascript\n\n$(\"#treeview\").hummingbird('removeNode',{attr:'id',name:'node-0-1-1-2'});\n\n$(\"#treeview\").hummingbird();\n\n```\n\n- **getChecked(List,{onlyEndNodes,onlyParents,fromThis})**\u003cbr\u003e\n  Get checked\n  nodes. Retrieve the id, data-id and text of the nodes.\n  Set onlyEndNodes to true if you want to retrieve only\n  that nodes identified by class=\"hummingbird-end-node\", i.e. those\n  nodes without children, so to speak the last instance. Default is\n  false, which means that all checked nodes are retrieved. Set onlyParents to true ( and onlyEndNodes to false)\n  to get only parents nodes. Set *fromThis* to true to only retrieve nodes from the current group and below (default is false).\n  Define an\n  object, List, for the output of this method. It is important to name \n  the arrays exactly like in the example below.\n  Finally this List\n  array can be bound to a DOM element and it is also straight forward\n  to do other stuff with the arrays, e.g. retrieving the length of it.\n\n```javascript\n\nvar List = {\"id\" : [], \"dataid\" : [], \"text\" : []};\n$(\"#treeview\").hummingbird(\"getChecked\",{list:List,onlyEndNodes:true,onlyParents:false,fromThis:false});\n$(\"#displayItems\").html(List.text.join(\"\u003cbr\u003e\"));\nvar L = List.id.length;\n\n```\n\n- **getUnchecked(List,{onlyEndNodes,onlyParents})**\u003cbr\u003e\n  Get unchecked\n  nodes. Retrieve the id, data-id and text of the nodes.\n  Set onlyEndNodes to true if you want to retrieve only\n  that nodes identified by class=\"hummingbird-end-node\", i.e. those\n  nodes without children, so to speak the last instance. Default is\n  false, which means that all unchecked nodes are retrieved. Set onlyParents to true ( and onlyEndNodes to false)\n  to get only parents nodes.\n    Define an\n  object, List, for the output of this method. It is important to name \n  the arrays exactly like in the example below.\n  Finally this List\n  array can be bound to a DOM element and it is also straight forward\n  to do other stuff with the arrays, e.g. retrieving the length of it.\n\n```javascript\n\nvar List = {\"id\" : [], \"dataid\" : [], \"text\" : []};\n$(\"#treeview\").hummingbird(\"getUnchecked\",{list:List,onlyEndNodes:true,onlyParents:false});\n$(\"#displayItems\").html(List.text.join(\"\u003cbr\u003e\"));\nvar L = List.id.length;\n\n```\n\n- **getIndeterminate(List)**\u003cbr\u003e\n  Get indeterminate\n  nodes. Retrieve the id, data-id and text of the nodes.\n  Define an\n  object, List, for the output of this method. It is important to name \n  the arrays exactly like in the example below.\n  Finally this List\n  array can be bound to a DOM element and it is also straight forward\n  to do other stuff with the arrays, e.g. retrieving the length of it.\n\n```javascript\n\nvar List = {\"id\" : [], \"dataid\" : [], \"text\" : []};\n$(\"#treeview\").hummingbird(\"getIndeterminate\",{list:List});\n$(\"#displayItems\").html(List.text.join(\"\u003cbr\u003e\"));\nvar L = List.id.length;\n\n```\n\n- **saveState(treeState)**\u003cbr\u003e A typically occuring situation is that\n    it is needed to save the state of the treeview for later\n    rebuilding.  This can be accomplished by using the *saveState* and\n    *restoreState* methods.  First save the state in the object\n    *treeState* and restore it later. A good point for saving the\n    state is after receiving the *CheckUncheckDone* event. \n\n\n```javascript\n\nvar treeState = {};\n$(\"#treeview\").hummingbird(\"saveState\",{save_state:treeState});\n\n```\n\n- **restoreState(treeState)**\u003cbr\u003e Restore the before saved state from the object *treeState*.\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"restoreState\",{restore_state:treeState});\n\n```\n   \u003cbr\u003e\n   In addition *restoreState* can be used to create any arbitrary states created by custom methods.\n   Therefore the *treeState* object must look like the following:\n  \n```javascript\n\nvar treeState = {\"checked\":{}, \"indeterminate\":{}};\ntreeState.checked = checked;\ntreeState.indeterminate = indeterminate;\n\n```\n   \u003cbr\u003e\n   where the objects *checked* and *indeterminate* contain the respective node ID information:\n\n```javascript\n\nvar checked = {\"id\" : []};\nvar indeterminate = {\"id\" : []};\n\n```\n\n- **triState**\u003cbr\u003e This is the function, which controls the tri-state\n  functionality. Use it if you have changed the treeview by external procedures to achieve a consistent tri-state.\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"triState\");\n\n```\n\n- **skipCheckUncheckDone**\u003cbr\u003e Skip firing the *CheckUncheckDone* event in the following call.\n  This method can be called before any other method to skip firing the *CheckUncheckDone* event in the followed method.\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"skipCheckUncheckDone\");\n\n```\n\n- **filter(str,{box_disable,caseSensitive,onlyEndNodes,filterChildren})**\u003cbr\u003e\n  Removes all nodes which NOT match a search pattern.\n  Use \"|\" as a seperator of search strings.\n  The *filter* method uses the *OR* logic. For instance if *str=\".txt|.jpg|test\"*\n  then only nodes which contain\n  *.txt* or *.jpg* or *test* are shown in the treeview.\n  Optional setting:\u003cbr\u003e \n  Use *box_disable: true* to not remove the nodes, but disable them.\n  Use *caseSensitive: true* to restrict searches to exact case-match, the deafult filter criteria is case-insensitive.\n  To apply the filter only to nodes, which have no children, i.e. those of class=\"hummingbird-end-node\" use\n  *onlyEndNodes:true*. \n   Set *filterChildren:false*\n  to NOT remove children of a node that is not filtered out.\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"filter\",{str:\".txt|.jpg|test\", caseSensitive: false, box_disable:false, onlyEndNodes:false, filterChildren:true});\n\n```\n\n- **search(treeview_container,search_input,search_output,search_button,{scrollOffset, onlyEndNodes, dialog, EnterKey, enter_key_1, enter_key_2})**\u003cbr\u003e\n  If the treeview is embedded in a\n  scrollable (css option: overflow-y:\n  scroll;) container, this container must be\n  identified here as the treeview_container\n  (using the id). Otherwise\n  treeview_container should be set to\n  \"body\". The search_input parameter depicts\n  the id of the input element for the search\n  function. The search_output defines an\n  element to bind the search results on\n  (like the ul in the example below). The search_button is\n  simply the button for the search. A\n  scrollOffset in pixels (negative or\n  positive) can be defined to adjust the\n  automatic scoll position. The best value\n  must be observed by\n  testing. onlyEndNodes is per default\n  false, thus set this to true if the search\n  should include also parent nodes. The\n  optional parameter dialog is per default\n  empty (\"\"). This parameter can be used for\n  special cases, to bind the treeview to a\n  dynamical created object like a bootstrap\n  modal (pop-up). In such a case this\n  parameter would be\n  dialog:\".modal-dialog\". Three other\n  optional parameters, EnterKey, enter_key_1\n  and enter_key_2 are available. EnterKey is\n  per default true and can be set to\n  false. If true the search_button can be\n  triggered with the Enter key. To avoid\n  interference of the Enter key\n  functionality it can be restricted and\n  only be executable if enter_key_1 ==\n  enter_key_2. These two parameters can be\n  chosen arbitrarily.\n\n```javascript\n\n$(\"#treeview\").hummingbird(\"search\",{treeview_container:\"treeview_container\", search_input:\"search_input\", search_output:\"search_output\", search_button:\"search_button\", scrollOffset:-515, onlyEndNodes:false});\n\n```\n\n  As an example, the search functionality is here\n  implemented using \u003ca href=\"http://getbootstrap.com/\"\u003eBootstrap\u003c/a\u003e. Other implementation are possible.\n\n  HTML:\n  \n```html\n\n\u003cdiv class=\"dropdown\"\u003e\n    \u003cdiv class=\"input-group stylish-input-group\"\u003e\n\t\u003cinput id=\"search_input\" type=\"text\" class=\"form-control\" placeholder=\"Search\" onclick=\"this.select()\"\u003e\n\t\u003cspan class=\"input-group-addon\" style=\"border-left:0\"\u003e\n\t    \u003cbutton type=\"submit\" id=\"search_button\"\u003e\n\t\t\u003cspan class=\"glyphicon glyphicon-search\"\u003e\u003c/span\u003e\n\t    \u003c/button\u003e\n\t\u003c/span\u003e\n\t\u003cul class=\"dropdown-menu h-scroll\" id=\"search_output\"\u003e\n\t\u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n```\n\n  CSS:\n\n```css\n\n.stylish-input-group .input-group-addon{\n    background: white !important;\n}\n.stylish-input-group .form-control{\n    //border-right:0;\n    box-shadow:0 0 0;\n    border-color:#ccc;\n}\n.stylish-input-group button{\n    border:0;\n    background:transparent;\n}\n\n.h-scroll {\n    background-color: #fcfdfd;\n    height: 260px; \n    overflow-y: scroll;\n}\n\n```\n\n\n## Events\nEvents are fired on changes of the treeview state so that your application can respond:\n\n- **nodeChecked**\u003cbr\u003e\n  This event is fired if a node has been checked and can be catched like this:\n\n```javascript\n\n$(\"#treeview\").on(\"nodeChecked\", function(){\n   do something ...\n});\n\n```\n\n- **nodeUnchecked**\u003cbr\u003e\n  This event is fired if a node has been unchecked and can be catched like this:\n\n```javascript\n\n$(\"#treeview\").on(\"nodeUnchecked\", function(){\n   do something ...\n});\n\n```\n\n\n- **CheckUncheckDone**\u003cbr\u003e\n  This event is fired if a node has been\n  checked or unchecked and all treeview\n  functionality is completed. This comprises\n  checking / unchecking parents, children,\n  checking for n-tuples and disabled etc.\n\n```javascript\n\n$(\"#treeview\").on(\"CheckUncheckDone\", function(){\n   do something ...\n});\n\n```\n\n\n- **nodeCollapsed**\u003cbr\u003e\n  This event is fired if a parent node has been collapsed and can be catched like this:\n\n```javascript\n\n$(\"#treeview\").on(\"nodeCollapsed\", function(){\n   do something ...\n});\n\n```\n\n\n- **nodeExpanded**\u003cbr\u003e\n  This event is fired if a parent node has been expanded and can be catched like this:\n\n```javascript\n\n$(\"#treeview\").on(\"nodeExpanded\", function(){\n   do something ...\n});\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhummingbird-dev%2Fhummingbird-treeview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhummingbird-dev%2Fhummingbird-treeview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhummingbird-dev%2Fhummingbird-treeview/lists"}