jquery-bigtree v1.0.8

#Bigtree

High performance hierarchical data rendering based on nested set model (pre-order tree).

##Features

• Large dataset
• Virtual scrolling
• Movable (dragdrop) nodes
• Editable nodes
• Keyboard navigation
• User plugins

##Dependencies

Bigtree is jQuery plugin that relies on some libraries:

• jQuery UI (sortable)

##Install

npm install jquery-bigtree

##Demo

Demo

##Usage

$('element').bigtree();

// with options
$('element').bigtree({
    markup: '<div></div>'
});

Hierarchical structure illustration:

Then, we transform the data into json:

var data = [
    {id: 1, text: 'ROOT', left: 1, right: 10, level: 0, leaf: 0, expand: 1, path: '1'},
    {id: 2, text: 'A',    left: 2, right:  7, level: 1, leaf: 0, expand: 1, path: '1/2'},
    {id: 3, text: 'B',    left: 3, right:  4, level: 2, leaf: 1, expand: 1, path: '1/2/3'},
    {id: 4, text: 'C',    left: 5, right:  6, level: 2, leaf: 1, expand: 1, path: '1/2/4'},
    {id: 5, text: 'D',    left: 8, right:  9, level: 1, leaf: 1, expand: 1, path: '1/5'}
];

Then, we load into plugin:

$('element').bigtree('load', data, true);

##Options

####- fields Type: Object Default: {}

Node field mapping to tranform real data field to node field, so plugin can works with user data structure (model).

fields: {
    id:     'id',
    text:   'text',
    left:   'left',
    right:  'right',
    level:  'level',
    leaf:   'leaf',
    path:   'path',
    expand: 'expand'
}

####- itemSize Type: Number Default: 32

Height for each rendered node.

####- stepSize Type: Number Default: 25

Padding size for each level.

####- delay Type: Number Default: 30

Scrolling delay, used for change scrolling size.

####- buffer Type: Number Default: 0

Leading and trailing rendered nodes from edges.

####- markup Type: String Default: <div></div>

Recommended markup used to render each node, support jsrender templtating tags.

<div class="bt-node bt-hbox" data-id="{{:id}}">
    <div class="bt-node-body bt-flex bt-hbox">
        <div class="bt-drag"></div>
        <div class="bt-plugin head"></div>
        <div class="bt-text bt-flex bt-hbox">{{:text}}</div>
        <div class="bt-plugin tail"></div>
    </div>
</div>

##Methods

####- load() Arguments: (Array data[, Boolean render = false]) Return: void

Used for loading data into plugin.

var data = [/* YOUR DATA HERE */];

$('element', data, true);

We can also loading data from paginated ajax request, for example:

var start = 0, limit = 100;

function load(start, limit) {
    $.ajax({
        url: 'tree.php',
        type: 'post',
        dataType: 'json',
        data: {
            start: start,
            limit: limit
        }
    }).done(function(response){
        // for example, we have following response
        // {data: [], total: 10000}

        $('element').bigtree('load', response.data);
        
        if ( ! $('element').bigtree('scrollable')) {
            $('element').bigtree('render');
        }

        start += limit;

        if ( start < response.total ) {
            // continue load
            load(start, limit);
        }
    });
}

// run first time
load(start, limit);

##Events

####- init.bt Arguments: (Event e)

Fired after plugin initialized.

$('element').on('init.bt', function(e){
    $('element').children().html('Loading...'); 
});

####- beforerender.bt Arguments: (Event e, Array data)

Fired before nodes rendered.

####- render.bt Arguments: (Event e, Array data, Array nodes)

Fired after nodes rendered.

####- expand.bt Arguments: (Event e, Object data)

Fired after node expanded.

$('element').on('expand.bt', function(e, data){
    $.ajax({
        url: 'update.php',
        data: {
            id: data.id,
            expand: data.expand
        }
    });
});

####- collapse.bt Arguments: (Event e, Object data)

Fired after node collapsed.

Plugin

You can write your own plugin for handle specific data (node).

var TrashPlugin = (function(){
   
    var Plugin = function() {
        /**
         * Template plugin
         */
        this.template = '<a href="#">' + 
                            '<i class="fa fa-trash-o"></i>{{:this.caption}}' + 
                        '</a>';

        /**
         * Plugin placement
         *
         * value: tail, head
         */
        this.place = 'tail';

        this.init();
    };

    Plugin.prototype = {

        update: function() {
            this.caption = 'Delete';
        },

        onInit: function (tree, data) {
            this.tree = tree;
            this.data = data;
        },

        onRender: function() {
            var tree = this.tree, data = this.data;

            this.element.on('click', function(e){

                if (confirm('Delete selected data?')) {
                    tree.remove(data);
                }

            });
        },

        onSuspend: function() {

        },

        destroy: function() {

        }
    };

    return Plugin;
});

Registering plugins:

$('element').bigtree({
    markup: '...',
    plugins: [
        new TrashPlugin({id: 'trash'})
    ]
});