Backbone.View component which provide interactive tree.
http://kirill-zhirnov.github.io/backbone-tree-view/
npm install backbone-tree-view- Add scripts and styles inside HEAD tag:
<!--Dependencies: -->
<link href="./node_modules/backbone-tree-view/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="./node_modules/backbone-tree-view/node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/backbone-tree-view/node_modules/underscore/underscore-min.js"></script>
<script src="./node_modules/backbone-tree-view/node_modules/backbone/backbone.js"></script>
<script src="./node_modules/backbone-tree-view/node_modules/backbone-tree-model/src/backbone.treemodel.js"></script>
<!--Backbone-tree-view: -->
<link href="./node_modules/backbone-tree-view/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="./node_modules/backbone-tree-view/lib/backbone-tree-view.js"></script>- Add container inside BODY:
<body>
<div id="tree"></div>
</body>- Prepare array for collection:
var data = [
{
id:7,
title:'No children'
},
{
id:1,
title:'Australia',
open : false,
nodes: [
{
id: 2,
title : 'Sydney'
}
]
},
];Or you can create collection:
var data = new BackTree.Collection([
{
id:7,
title:'No children'
},
{
id:1,
title:'Australia',
open : false,
nodes: [
{
id: 2,
title : 'Sydney'
}
]
},
]);- Create tree:
var tree = new BackTree.Tree({
collection : data
});- Render and append:
$('#tree').append(tree.render().$el); var data = [
{
id:7,
title:'No children'
},
{
id:1,
title:'Australia',
open : true,
checked : true,
nodes: [
{
id: 2,
title : 'Sydney'
}
]
},
];-
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.
var tree = new BackTree.Tree({
collection : data,
settings : {
plugins : {
DnD: {}
}
}
});- changeParent - (boolean) - if false only sorting will be available.
Example:
var tree = new BackTree.Tree({
collection : data,
settings : {
plugins : {
DnD: {
changeParent : false
}
}
}
}); 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()); var tree = new BackTree.Tree({
collection : collection,
settings : {
checkbox : true
}
});Get all checked:
collection.where({checked:true}, {deep:true});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent