Skip to content

kirill-zhirnov/backbone-tree-view

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:
        <!--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);

Data structure:

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

Possible keys:

  • 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

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

Possible options:

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

Example:

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

How to serialize tree?

	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:

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

Get all checked:

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

About

Backbone.View component which provide interactive tree. Demo:

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published