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});