search-course/public/assets/global/js/demo_pages/handsontable_basic.js

/* ------------------------------------------------------------------------------
 *
 *  # Handsontable - Excel-like tables with extensive funtionality
 *
 *  Demo JS code for handsontable_basic.html page
 *
 * ---------------------------------------------------------------------------- */


// Setup module
// ------------------------------

var HotBasic = function() {


    //
    // Setup module components
    //

    // Basic HOT examples
    var _componentHotBasic = function() {
        if (typeof Handsontable == 'undefined') {
            console.warn('Warning - handsontable.min.js is not loaded.');
            return;
        }


        // Basic configuration
        // ------------------------------

        // Add data for all examples
        var car_data = [
            {car: "Mercedes", model: "GL500", year: 2009, color: "blue", price: 32500},
            {car: "Chevrolet", model: "Camaro", year: 2012, color: "red", price: 42400},
            {car: "Dodge", model: "Charger", year: 2011, color: "white", price: 24900},
            {car: "Hummer", model: "H3", year: 2014, color: "black", price: 54000},
            {car: "Chevrolet", model: "Tahoe", year: 2009, color: "purple", price: 29300},
            {car: "Toyota", model: "Land Cruiser", year: 2007, color: "lime", price: 54500},
            {car: "Nissan", model: "GTR", year: 2009, color: "cyan", price: 44900},
            {car: "Porsche", model: "Cayenne", year: 2012, color: "yellow", price: 35000},
            {car: "Volkswagen", model: "Touareg", year: 2010, color: "crimson", price: 41000},
            {car: "BMW", model: "X5", year: 2010, color: "orange", price: 48800},
            {car: "Audi", model: "Q7", year: 2009, color: "green", price: 21000},
            {car: "Cadillac", model: "Escalade", year: 2012, color: "silver", price: 63900}
        ];

        // Define element
        var hot_basic = document.getElementById('hot_basic');

        // Initialize with options
        var hot_basic_init = new Handsontable(hot_basic, {
            data: car_data,
            stretchH: 'all'
        });

        $('.sidebar-control').on('click', function() {
            hot_basic_init.render();
        })



        // Column headers
        // ------------------------------

        // Define element
        var hot_col_headers = document.getElementById('hot_col_headers');

        // Initialize with options
        var hot_col_headers_init = new Handsontable(hot_col_headers, {
            data: car_data,
            colHeaders: true,
            stretchH: 'all'
        });



        // Row headers
        // ------------------------------

        // Define element
        var hot_row_headers = document.getElementById('hot_row_headers');

        // Initialize with options
        var hot_row_headers_init = new Handsontable(hot_row_headers, {
            data: car_data,
            colHeaders: true,
            rowHeaders: true,
            stretchH: 'all'
        });



        // Custom headers text
        // ------------------------------

        // Define element
        var hot_headers = document.getElementById('hot_headers');

        // Initialize with options
        var hot_headers_init = new Handsontable(hot_headers, {
            data: car_data,
            rowHeaders: true,
            colHeaders: ['Brand', 'Model', 'Year', 'Color', 'Price'],
            stretchH: 'all'
        });


        // Comments
        // ------------------------------

        // Define element
        var hot_comments = document.getElementById('hot_comments');

        // Init with options
        var hot_comments_init = new Handsontable(hot_comments, {
            data: car_data,
            rowHeaders: true,
            colHeaders: true,
            stretchH: 'all',
            comments: true,
            cell: [
                {row: 1, col: 1, comment: {value: 'The most nice looking muscle car'}},
                {row: 2, col: 2, comment: {value: 'Another comment'}}
            ]
        });



        // Custom borders
        // ------------------------------

        // Add data
        var hot_borders_data = Handsontable.helper.createSpreadsheetData(40, 10);

        // Define element
        var hot_borders = document.getElementById('hot_borders');

        // Init with options
        hot_borders_init = Handsontable(hot_borders, {
            data: hot_borders_data,
            rowHeaders: true,
            stretchH: 'all',
            fixedColumnsLeft: 2,
            fixedRowsTop: 2,
            colHeaders: true,
            customBorders: [
                {
                    range: {
                        from: {
                            row: 1,
                            col: 1
                        },
                        to: {
                            row: 3,
                            col: 4
                        }
                    },
                    top: {
                        width: 2,
                        color: '#5292F7'
                    },
                    left: {
                        width: 2,
                        color: 'orange'
                    },
                    bottom: {
                        width: 2,
                        color: 'red'
                    },
                    right: {
                        width: 2,
                        color: 'magenta'
                    }
                },
                {
                    row: 2,
                    col: 2,
                    left: {
                        width: 2,
                        color: 'red'
                    },
                    right: {
                        width: 1,
                        color: 'green'
                    }
                }
            ]
        });
    };


    //
    // Return objects assigned to module
    //

    return {
        init: function() {
            _componentHotBasic();
        }
    }
}();


// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
    HotBasic.init();
});