jsGrid.js

/**
 * Created with PyCharm.
 * User: a_m0d
 * Date: 3/27/13
 * Time: 9:55 PM
 */

(function (w, d, $) {
    'use strict';

    function jsGrid(id, params) {
        /// <param name="id">The id of the grid container / grid itself</param>
        var grid = {};
        grid.id = id;
        grid.$container = $('#' + id);
        grid.columns = params.columns;
        grid.rows = params.rows;

        //sortRows(grid, 2, 'desc');

        setColumnOrder(grid);
        createTable(grid);
        addEventHandlers(grid);
    }

    function setColumnOrder(grid) {
        function squish(ar) {
            var ar2 = [];
            for (var i = 0; i < ar.length; i++) {
                ar2.push(ar[i]);
            }
            return ar2;
        }

        var colOrderMapping = [];
        for (var i = 0; i <= grid.columns.length; i++) {
            for (var colIndex = 0; colIndex < grid.columns.length; colIndex++) {
                if ((grid.columns[colIndex].position != undefined) &&
                    (grid.columns[colIndex].position + 0) === i) {
                    colOrderMapping.splice(i, 0, colIndex);
                } else if ((!grid.columns[colIndex].position) && (i === grid.columns.length)) {
                    colOrderMapping.push(colIndex);
                }
            }
        }

        grid._colOrdering = squish(colOrderMapping);
    }

    function createTable(grid) {
        var $tableNode = grid.$tableNode || $('<table></table>')
            .addClass('gridTable');
        var $tableHead = grid.$tableHead || $('<thead></thead>');
        var $tableBody = grid.$tableBody || $('<tbody></tbody>');

        var colOrderedIndex;

        var $rowNode = $('<tr></tr>');
        for (var colIndex = 0; colIndex < grid.columns.length; colIndex++) {
            colOrderedIndex = grid._colOrdering[colIndex];
            if (grid.columns[colOrderedIndex].visible) {
                var $th = $('<th></th>').html(grid.columns[colOrderedIndex].caption) ||
                    grid.columns[colOrderedIndex].$th;
                $th.removeClass('sort-asc sort-desc');
                if (grid.columns[colOrderedIndex].sortDirection) {
                    $th.addClass('sort-' + grid.columns[colOrderedIndex].sortDirection);
                }
                if (!grid.columns[colOrderedIndex].$th) {
                    $rowNode.append($th);
                    grid.columns[colOrderedIndex].$th = $th;
                }
            }
        }
        $tableHead.append($rowNode);

        grid.$rowNodes = grid.$rowNodes || [];
        var isCreating = !grid.$rowNodes.length;
        if (!isCreating) {
            // detach all the rows to minimize the redraws
            grid.$tableBody.find('tr').detach();
            grid.$tableBody.detach();
        }
        for (var rowIndex = 0; rowIndex < grid.rows.length; rowIndex++) {
            var sortedIndex = grid.rowOrder && grid.rowOrder.length ? grid.rowOrder[rowIndex].index : rowIndex;
            var row = grid.rows[sortedIndex];

            if (!isCreating && grid.$rowNodes[sortedIndex]) {
                $rowNode = grid.$rowNodes[sortedIndex];
                $rowNode.appendTo($tableBody);
                //$tableBody.append($rowNode);
            }
            else {
                $rowNode = $('<tr></tr>');
                for (var cellIndex = 0; cellIndex < row.length; cellIndex++) {
                    colOrderedIndex = grid._colOrdering[cellIndex];
                    if (grid.columns[colOrderedIndex].visible) {
                        $rowNode.append($('<td></td>').html(row[colOrderedIndex] + ''));
                    }
                }
                $tableBody.append($rowNode);
                grid.$rowNodes[rowIndex] = $rowNode;
            }
        }

        $tableNode.append($tableHead);
        $tableNode.append($tableBody);
        grid.$container.append($tableNode);
        grid.$tableHead = $tableHead;
        grid.$tableBody = $tableBody;
        grid.$tableNode = $tableNode;
    }

    function sortRows(grid, colIndex, dir) {
        function swap(arr, left, right) {
            var tmp = arr[left];
            arr[left] = arr[right];
            arr[right] = tmp;
        }

        function partition(arr, leftIndex, rightIndex, pivotIndex, cmp) {
            var pivotValue = arr[pivotIndex].value,
                storeIndex = leftIndex;
            swap(arr, rightIndex, pivotIndex);
            for (var i = leftIndex; i < rightIndex; i++) {
                if (cmp(arr[i].value, pivotValue)) {
                    swap(arr, storeIndex, i);
                    storeIndex++;
                }
            }
            swap(arr, storeIndex, rightIndex);
            return storeIndex;
        }

        function quickSort(arr, leftIndex, rightIndex, cmp) {
            if (leftIndex < rightIndex) {
                var pivotIndex = Math.floor(leftIndex + (rightIndex - leftIndex) / 2);
                var newPivotIndex = partition(arr, leftIndex, rightIndex, pivotIndex, cmp);
                quickSort(arr, leftIndex, newPivotIndex - 1, cmp);
                quickSort(arr, newPivotIndex + 1, rightIndex, cmp);
            }
        }

        var i;
        if (!grid.rowOrder) {
            grid.rowOrder = [];
        }

        for (i = 0; i < grid.rows.length; i++) {
            grid.rowOrder[i] = {index: i, value: grid.rows[i][colIndex]};
        }

        if (dir === 'asc') {
            quickSort(grid.rowOrder, 0, grid.rowOrder.length - 1, function (a, b) {
                return a <= b;
            });
        } else {
            quickSort(grid.rowOrder, 0, grid.rowOrder.length - 1, function (a, b) {
                return a >= b;
            });
        }

        grid.columns[colIndex].sortDirection = dir;
        grid.currentSort = {column: colIndex, direction: dir};
    }

    function addEventHandlers(grid) {
        grid.columns.forEach(function (element, index) {
            if (element.$th) {
                element.$th.on('click', function () {
                    var newDirection = (element.sortDirection === 'asc' ? 'desc' : 'asc');
                    if (grid.currentSort) {
                        grid.columns[grid.currentSort.column].sortDirection = null;
                    }
                    sortRows(grid, index, newDirection);
                    createTable(grid);
                });
            }
        });
    }

    // exports:
    w.jsGrid = jsGrid;
})(window, document, jQuery);