❤
npm
Sign UpSign In

backbone-tree-view

0.0.13 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i backbone-tree-view

Repository

github.com/kirill-zhirnov/backbone-tree-view

Homepage

github.com/kirill-zhirnov/backbone-tree-view

Weekly Downloads

23

Version

0.0.13

License

MIT

Unpacked Size

89.9 kB

Total Files

22

Last publish

Collaborators

  • kirill-zhirnov
Try on RunKit
Report malware