Skip to content

Latest commit

 

History

History
208 lines (173 loc) · 3.93 KB

README.md

File metadata and controls

208 lines (173 loc) · 3.93 KB
Raw

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