https://github.com/jaideepghosh/bootree
A simple solution for displaying check-boxes in hierarchical tree structures (i.e. a Tree View) with Amazing Bootstrap.
https://github.com/jaideepghosh/bootree
bootstrap checkbox jquery treeview
Last synced: 6 months ago
JSON representation
A simple solution for displaying check-boxes in hierarchical tree structures (i.e. a Tree View) with Amazing Bootstrap.
- Host: GitHub
- URL: https://github.com/jaideepghosh/bootree
- Owner: jaideepghosh
- Created: 2018-04-25T13:41:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-01-24T08:06:37.000Z (almost 6 years ago)
- Last Synced: 2025-03-25T15:54:33.121Z (9 months ago)
- Topics: bootstrap, checkbox, jquery, treeview
- Language: HTML
- Homepage: https://jaideepghosh.github.io/BooTree/
- Size: 154 KB
- Stars: 3
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BooTree
A simple solution for displaying check-boxes in hierarchical tree structures (i.e. a Tree View) with Amazing Bootstrap.
## Dependencies
1. [jQuery v2.1.3 (>= 1.9.0)](http://jquery.com/)
2. [Bootstrap v3.3.4 (>= 3.0.0)](http://getbootstrap.com/)
## Getting Started
### Installation
Include the following files in your project.
1. bootree.min.css
2. bootree.min.js
### Usage
Add the following resources in your html file.
```
```
The component will bind to any existing DOM element.
```
```
To initialize the BooTree and plot the check-boxes in #tree:
```
$(document).ready(function () {
var tree = $('#tree').tree({
primaryKey: 'id',
uiLibrary: 'bootstrap',
dataSource: [ { id: 1, text: 'Apple', children: [ { id: 2, text: 'Avocado' } ] } ]
checkboxes: true
});
$('#btnSave').on('click', function () {
var checkedIds = tree.getCheckedNodes();
alert(checkedIds);
});
});
```
# Example
You can see BooTree [here](https://jaideepghosh.github.io/BooTree/example/index.html).