Default Handsontable Demo

by igos

HTML

<script src="http://handsontable.com/jquery.handsontable.js"></script>
<script src="http://handsontable.com/lib/bootstrap-typeahead.js"></script>
<script src="http://handsontable.com/lib/jQuery-contextMenu/jquery.contextMenu.js"></script>
<script src="http://handsontable.com/lib/jQuery-contextMenu/jquery.ui.position.js"></script>
<link rel="stylesheet" href="http://handsontable.com/lib/jQuery-contextMenu/jquery.contextMenu.css">
<link rel="stylesheet" href="http://handsontable.com/jquery.handsontable.css">
<h2>Default Handsontable Demo</h2>
<div id="suma"></div>
<div id="exampleGrid" class="dataTable"></div>
<div id="superGrid" class="dataTable"></div>

CSS

.handsontable .currentRow {
              background-color: #E7E8EF;
            }

            .handsontable .currentCol {
              background-color: #F9F9FB;
            }

JavaScript

var tableConfig = {
    firstCol : 1, //pierwsza kolumna z danymi
    sumCol : 13 //ostatnia kolumna z suma
};
//zewnetrzny slownik co z ta komorka robic
var cellDictionary = [];
cellDictionary[2] = 1;


var sumDictionary = [];
sumDictionary[1] = 2;

var customRenderer = function (instance, td) {
  Handsontable.TextCell.renderer.apply(this, arguments);
  if (true) {
    td.style.backgroundColor = 'yellow';
  }
  else {
    td.style.backgroundColor = 'white';
  }
  return td;
};

function cellChanged (changes, source,gridId) {
    if(changes !== null && source == "edit" && changes[0][1] != tableConfig.sumCol) {
        if ($.isNumeric(sumDictionary[changes[0][0]])) {
            $(gridId).handsontable('setDataAtCell',sumDictionary[changes[0][0]], changes[0][1],changes[0][3]);
        }
        
        var suma = 0;
        for (var i = tableConfig.firstCol; i < tableConfig.sumCol; i++) {
            var value =  Number($(gridId).handsontable('getDataAtCell', changes[0][0], i));    
            if(jQuery.isNumeric(value)) {
                suma += value;
            }
        }
        $(gridId).handsontable('setDataAtCell', changes[0][0],tableConfig.sumCol, suma);
    }
};

function cellRender (row, col, prop,gridId) {
    var cellProperties = {};
    
    if($.isNumeric(cellDictionary[row])) {
        cellProperties.readOnly = true;
    }
    
    return cellProperties;
};

var myData = [
    ["", "Kia", "Nissan", "Toyota", "Honda"],
    ["Sumarycznie", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
    ];


$("#exampleGrid").handsontable({
    onChange: function(changes, source) { cellChanged (changes, source,"#exampleGrid"); },
    autoWrapRow: true,
    autoWrapCol: true,
    data: myData,
    colWidths: [120, 50],
    minSpareCols: 0,
    //podswietlenie wybranego rowa
    currentRowClassName: 'currentRow',
    currentColClassName: 'currentCol',
    //always keep at least 1 spare row at the bottom,
    colHeaders: ["opis","1",...