backbone-tree-view

Backbone.View component which provide interactive tree.

Demo
----
http://kirill-zhirnov.github.io/backbone-tree-view/

How to install?
---------------

* npm install backbone-tree-view
* Add scripts and styles inside HEAD tag:

``html










`

* Add container inside BODY:

`html





`

* Prepare array for collection:

`javascript
var data = [
{
id:7,
title:'No children'
},
{
id:1,
title:'Australia',
open : false,
nodes: [
{
id: 2,
title : 'Sydney'
}
]
},
];
`

Or you can create collection:

`javascript
var data = new BackTree.Collection([
{
id:7,
title:'No children'
},
{
id:1,
title:'Australia',
open : false,
nodes: [
{
id: 2,
title : 'Sydney'
}
]
},
]);
`

* Create tree:

`javascript
var tree = new BackTree.Tree({
collection : data
});
`

* Render and append:

`javascript
$('#tree').append(tree.render().$el);
`

Data structure:
---------------

`javascript
var data = [
{
id:7,
title:'No children'
},
{
id:1,
title:'Australia',
open : true,
checked : true,
nodes: [
{
id: 2,
title : 'Sydney'
}
]
},
];
`

$3

- nodes - (Array) - Array with children.

- open - (boolean) - If leaf has child - it will be opened.

- checked - (boolean) - If tree has checkboxes - checkbox will be checked.

Drag and drop
-------------

`javascript
var tree = new BackTree.Tree({
collection : data,
settings : {
plugins : {
DnD: {}
}
}
});
`

$3

- changeParent - (boolean) - if false only sorting will be available.

Example:

`javascript
var tree = new BackTree.Tree({
collection : data,
settings : {
plugins : {
DnD: {
changeParent : false
}
}
}
});
`

How to serialize tree?
----------------------

`javascript
var collection = new BackTree.Collection([
{
id:7,
title:'No children'
},
{
id:1,
title:'Australia',
open : false,
nodes: [
{
id: 2,
title : 'Sydney'
}
]
},
]);

var tree = new BackTree.Tree({
collection : collection,
settings : {
plugins : {
DnD: {}
}
}
});

console.log(collection.toJSON());
`

Checkboxes:
-----------

`javascript
var tree = new BackTree.Tree({
collection : collection,
settings : {
checkbox : true
}
});
`

Get all checked:

`javascript
collection.where({checked:true}, {deep:true});
``