Spreadsheet Like JavaScript Grid

In version 1.3 a new feature was introducted that allows to create spreadsheet like grids. Some functionality comes by default and other can be extended with events.
// widget configuration var config = { grid: { name: 'grid', selectType: 'cell', show: { footer: true, lineNumbers: true }, onColumnClick: function (event) { this.selectNone(); var column = this.getColumn(event.field, true); var sel = []; for (var i = 0; i < this.total; i++) { sel.push({ recid: this.records[i].recid, column: column }); } this.select.apply(this, sel); event.preventDefault(); }, onSelectionExtend: function (event) { event.onComplete = function () { console.log('Original:', event.originalRange[0], '-', event.originalRange[1]); console.log('New:', event.newRange[0], '-', event.newRange[1]); w2alert('Selection expaned (see more details in the console).'); } }, onDelete: function (event) { event.force = true; } } } $(function () { // initialization $().w2grid(config.grid); // create columns var tmp = 'abcdefghijklmnoprst'; var values = {}; for (var i=0; i < tmp.length; i++) { w2ui.grid.columns.push({ field: tmp[i], caption: '
' + tmp[i].toUpperCase() + '
', size: '15%', resizable: true, sortable: true, editable: { type: 'text' } }); values[tmp[i]] = ''; } // insert records for (var i = 0; i < 100; i++) { w2ui.grid.records.push($.extend({ recid: i+1 }, values)); } w2ui.grid.total = w2ui.grid.records.length; w2ui.grid.buffered = w2ui.grid.total; // init some values w2ui.grid.records[2].c = 1; w2ui.grid.records[3].c = 2; w2ui.grid.records[4].c = 3; w2ui.grid.records[5].c = 4; w2ui.grid.records[6].c = 5; w2ui.grid.records[2].d = 67; w2ui.grid.records[3].d = 35; w2ui.grid.records[4].d = 17; w2ui.grid.records[5].d = 84; w2ui.grid.records[6].d = 14; // display grid $('#main').w2render('grid'); }); function mark() { w2ui.grid.addRange({ name : 'range', range : [{ "recid": 3, "column": 2 }, { "recid": 7, "column": 3 }], style : "border: 2px dotted green; background-color: rgba(100,400,100,0.2)" }); }