[](https://www.npmjs.com/package/bootstrap-csstree) [](https://travis-ci.org/hhdevelopment/bootstrap-csst
npm install bootstrap-csstree

Finally add bootstrap-csstree.css to your project
sh
npm install bootstrap-csstree --save
`Include css in your build
`sh
node_modules/bootstrap-csstree/dist/bootstrap-csstree.css
`$3
In your index.html
* Add bootstrap-csstree.css directly or from you dependencies tools (npm, webpack, gulp, etc...)
`html
...
...
`* Add root tree
`html
`See class tree
Here we use recursive template tree-template.html
See classes for style tree :
* class disabled
* Define items template
** tree-template.html
`html
class="tree-item">
{{folder.label}} {{folder.id}}
See main class
* class tree-item
See classes for style tree-item :
* class tree-item-success
* class tree-item-info
* class tree-item-warning
* class tree-item-danger
* class active
* class disabled
See for collapse, folde, expande icons :
* atttribute open
* atttribute close
Add noselect on node that not select item
Add data-toggle and data-target for use boostrap feature collapse in and out
See classes :
* tree-childen
* collapse
* in : treechildren will be open
$3
Example in angular 1`js
var ctrl = this;
ctrl.folders = [];
ctrl.handlerSelectFolder = handlerSelectFolder;
ctrl.selectedFolderIds = [];/**
* folder selection
* @param {type} event
* @param {type} folder
*/
function handlerSelectFolder(event, folder) {
if(!event.target.hasAttribute("notselect") && !folder.disabled) {
if(!event.ctrlKey) {
ctrl.selectedFolderIds = [folder.id];
} else {
var idx = ctrl.selectedFolderIds.indexOf(folder.id);
if(idx !== -1) {
ctrl.selectedFolderIds.splice(idx, 1);
} else {
ctrl.selectedFolderIds.push(folder.id);
}
}
}
}
``Function handlerSelectFolder can be use for standard use. ctrl key press for multi select, etc...