jquery-bigtree

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