{"id":13991811,"url":"https://github.com/chniter/bstreeview","last_synced_at":"2025-04-13T11:48:20.285Z","repository":{"id":41790057,"uuid":"236801685","full_name":"chniter/bstreeview","owner":"chniter","description":"Bootstrap Treeview, A very simple plugin to build a basic and elegant Treeview with bootstrap 4. See the demo: ","archived":false,"fork":false,"pushed_at":"2022-04-28T20:39:57.000Z","size":71,"stargazers_count":370,"open_issues_count":20,"forks_count":53,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-04T05:08:23.768Z","etag":null,"topics":["bootstrap","bootstrap-treeview","bootstrap4","bstreeview","node","tree-structure","treenode","treeview"],"latest_commit_sha":null,"homepage":"https://chniter.github.io/bstreeview/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chniter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":["buymeacoffee.com/schniter"]}},"created_at":"2020-01-28T17:58:44.000Z","updated_at":"2025-02-01T04:43:47.000Z","dependencies_parsed_at":"2022-08-11T17:21:22.646Z","dependency_job_id":null,"html_url":"https://github.com/chniter/bstreeview","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chniter%2Fbstreeview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chniter%2Fbstreeview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chniter%2Fbstreeview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chniter%2Fbstreeview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chniter","download_url":"https://codeload.github.com/chniter/bstreeview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248710410,"owners_count":21149186,"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":["bootstrap","bootstrap-treeview","bootstrap4","bstreeview","node","tree-structure","treenode","treeview"],"created_at":"2024-08-09T14:01:36.422Z","updated_at":"2025-04-13T11:48:20.254Z","avatar_url":"https://github.com/chniter.png","language":"JavaScript","funding_links":["buymeacoffee.com/schniter","https://www.buymeacoffee.com/schniter"],"categories":["JavaScript"],"sub_categories":[],"readme":"# Bootstrap 4 Tree View\n\n---\n\n[![npm version](https://img.shields.io/npm/v/bstreeview.svg?style=flat)](https://www.npmjs.com/package/bstreeview)\n\nA very simple plugin to build a basic and elegant Treeview with boostrap 4.\n\n![Bootstrap Tree View Default](https://github.com/chniter/bstreeview/blob/master/screeshots/bstreeview.PNG?raw=true)\n\n## Dependencies\n\nWhere provided these are the actual versions bootstrap-treeview has been tested against.  \n\n- [Bootstrap v4.4.1 (\u003e= 4.3.1)](http://getbootstrap.com/)\n- [jQuery v3.4.1 (\u003e= 1.9.0)](http://jquery.com/)\n\n## Support\nHas this Project helped you learn something New? or Helped you at work? Do Consider Supporting.\n\n\u003ca href=\"https://www.buymeacoffee.com/schniter\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-red.png\" alt=\"Buy Me A Coffee\" width=\"200\"  \u003e\u003c/a\u003e\n\n\n## Getting Started\n\n### Install\n\nYou can install using npm (recommended):\n\n```javascript\n$ npm install bstreeview\n```\n\nor [download](https://github.com/chniter/bstreeview/releases/tag/v1.2.0) manually.\n\n\n\n### Usage\n\nAdd the following resources for the 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=\"bstreeview.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').bstreeview({ 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: \"Node 1\",\n    icon: \"fa fa-folder\",\n    nodes: [\n      {\n        text: \"Sub Node 1\",\n        icon: \"fa fa-folder\",\n        nodes: [\n          {\n            id:    \"sub-node-1\",\n            text:  \"Sub Child Node 1\",\n            icon:  \"fa fa-folder\",\n            class: \"nav-level-3\",\n            href:  \"https://google.com\"\n          },\n          {\n            text: \"Sub Child Node 2\",\n            icon: \"fa fa-folder\"\n          }\n        ]\n      },\n      {\n        text: \"Sub Node 2\",\n         icon: \"fa fa-folder\"\n      }\n    ]\n  },\n  {\n    text: \"Node 2\",\n    icon: \"fa fa-folder\"\n  },\n  {\n    text: \"Node 3\",\n    icon: \"fa fa-folder\"\n  },\n  {\n    text: \"Node 4\",\n    icon: \"fa fa-folder\"\n  },\n  {\n    text: \"Node 5\",\n    icon: \"fa fa-folder\"\n  }\n];\n```\n\nThis property `text` is required to display nodes.\n\n```javascript\n{\n  text: \"Node 1\"\n}\n```\n\n### Node Properties\n\n#### text\n`String` `Mandatory`\n\nThe text value displayed for a given tree node.\n\n#### icon\n`String` `Optional`\n\nThe icon displayed on a given node.\n\n#### href\n`String` `Optional`\n\nA custom `href` attribute value for a given node.\n\n#### class\n`String` `Optional`\n\nA class name or space separated list of class names to add to a given node.\n\n#### id\n`String` `Optional`\n\nID attribute value to assign to a given node.\n\n## Options\n\n#### data\n`String` `Mandatory`\n\nJson or string array of nodes.\n\n#### expandIcon\n`String` `Optional`\n\nExpand icon class name, default is `fa fa-angle-down fa-fw`.\n\n#### collapseIcon\n`String` `Optional`\n\nCollapse icon class name, default is `fa fa-angle-right fa-fw`.\n\n#### indent\n`number with decimals` `Optional`\n\nCustom indent between node levels (rem), default is `1.25`.\n\n#### parentsMarginLeft\n`String` `Optional`\n\nmargin-left value of parent nodes, default is `1.25rem`.\n\n#### openNodeLinkOnNewTab\n`Boolean` `Optional`\n\nOpen node link on new browser Tab, default is `true`.\n\n```javascript\n// Example: initializing the bstreeview\n$('#tree').bstreeview({\n  data: data,\n  expandIcon: 'fa fa-angle-down fa-fw',\n  collapseIcon: 'fa fa-angle-right fa-fw',\n  indent: 1.25,\n  parentsMarginLeft: '1.25rem',\n  openNodeLinkOnNewTab: true\n});\n```\n\n## Methods\n\n\n## Events\n\n\n\n\n\n## Copyright and Licensing\nCopyright 2020 Sami CHNITER\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchniter%2Fbstreeview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchniter%2Fbstreeview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchniter%2Fbstreeview/lists"}