BOOTSTRAP-CSSTREE : A full bootstrap css implementation for tree data structure


Demo

Demo

How do I get set up?

$3

Tree.css is based on bootstrap features.
So add bootstrap.js, bootrap-theme.js, jquery.js.
Optionnaly add fonts from boostrap.
Of course you can use your favorite dependency manager, bower or npm and your favorute packager like webpack.
Treecss is only css so no probleme for packaging.

Finally add bootstrap-csstree.css to your project

$3

Use npm
``sh
npm install bootstrap-csstree --save
`

Include css in your build

`sh
node_modules/bootstrap-csstree/dist/bootstrap-csstree.css
`

!sample.PNG

$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



`

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...