Quickstart

Installation

Add Globally

You will need to include jQuery, jQuery UI and MithrilJS files and add the two files required for Treebeard (treebeard.js and treebeard.css -- both can be found under the /dist folder and minified versions are also available).

<link rel="stylesheet" href="dist/treebeard.css" type="text/css" />
...
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="path/to/mithril.js"></script>
<script src="path/to/treebeard.js"></script>

AMD/CommonJS

Treebeard comes with a wrapper that is suitable for AMD modules, Node.js style require or no module (just as global variable).

Install with Bower

Treebeard is now on bower. You can install from the command line and save as a dependency of your project:

bower install treebeard --save

Creating a New Grid

To create a new grid in Treebeard, all you need to do is pass in a set of options into Treebeard.run() and it will populate into the specified div in your HTML. Please view our Options page for further explanations of the options we have to offer.

Example:

    <div id="myGrid"></div>

    <script>
       /*
         *  User defined options
         */
        var options = {
            divID : 'myGrid',
            filesData : "tree.json",
            rowHeight : 35,
            showTotal : 15,
            paginate : false,
            paginateToggle : false,
            lazyLoad : true,
            uploads : true,
            dropzone : {
                url : ""
            },
            allowMove : true,
            multiselect : true,
            hoverClass : 'hoverClass',
            moveClass : 'tb-draggable',
            resolveRows : function (item) {
                return [            // Defines columns based on data
                    {
                        data : "title",  // Data field name
                        folderIcons : true,
                        filter : true,
                        css : 'tb-draggable'
                    },
                    {
                        data : "person",
                        filter : true
                    },
                    {
                        data : "age",
                        filter : false
                    },
                    {
                        data : "action",
                        sortInclude : false,
                        filter : false,
                        custom : function (row, col) {
                            var that = this;
                            return m("button.tb-button", {
                                onclick: function _deleteClick(e) {
                                    e.stopPropagation();
                                    that.deleteNode(row.parentID, row.id);
                                }
                            }, " X ");
                        }
                    }
                ];
            },
            dropEvents : {
                over : function(event, ui) {
                },
                drop : function(event, ui) {
                    console.log("dropped", event, ui);
                    console.log($(ui.draggable).text());
                }
            }

        };
        /*
         *  User defined code to implement Treebeard anywhere on the page.
         */
        var myTreebeard = Treebeard(options);
    </script>

Adding Data

The options include the filesData property which can take either an array you made yourself or a link that returns a json array. If your links are returning objects only load your return information first and then add that into treebeard.

When you are inputting your data as an array of objects, it must have the name, and kind(either "folder" or "item") properties. Treebeard assigns unique ID's to the elements for its operation.

Example:

var files = [
    {name: 'My Documents', kind: 'folder',
    children: [
      {name: 'mydoc.txt', kind: 'item'},
    ]},
    {name: 'Music', kind: 'folder',
    children: [
      {id: 4, name: 'psycho-killer.mp3', kind: 'item'}
    ]}
]

var options = {
        divID : "myGrid",
        filesData : files,     // Array variable to be passed in
        rowHeight : 35,         
        paginate : false,       
        showPaginate : false    
    };

Dependencies

Treebeard requires jQuery, jQuery UI and Mithril. If you aren't already using these here's where you can add them:

• Jquery : http://jquery.com/
• Jquery UI : http://jqueryui.com/
• Mithril JS : http://lhorie.github.io/mithril/installation.html

Treebeard also relies on font-aweome icons, but these are not hard dependencies as you can replace how icons are shown. If you are already using font-awesome you don't need to do anything else. If not download and place the font files and font css to any location on your project (as long as the page that runs treebeard has the css loaded it will work)

http://fortawesome.github.io/Font-Awesome/