Handling events


1

Various tracking javascript methods

Binding events on your javascript spreadsheet.

See a list of all event handlers




Log:



Source code

<html>
<script src="https://bossanova.uk/jexcel/v4/jexcel.js"></script>
<script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/jexcel/v4/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" />

<div id="spreadsheet"></div>

<script>
var changed = function(instance, cell, x, y, value) {
    var cellName = jexcel.getColumnNameFromId([x,y]);
    $('#log').append('New change on cell ' + cellName + ' to: ' + value + '
'); } var beforeChange = function(instance, cell, x, y, value) { var cellName = jexcel.getColumnNameFromId([x,y]); $('#log').append('The cell ' + cellName + ' will be changed
'); } var insertedRow = function(instance) { $('#log').append('Row added
'); } var insertedColumn = function(instance) { $('#log').append('Column added
'); } var deletedRow = function(instance) { $('#log').append('Row deleted
'); } var deletedColumn = function(instance) { $('#log').append('Column deleted
'); } var sort = function(instance, cellNum, order) { var order = (order) ? 'desc' : 'asc'; $('#log').append('The column ' + cellNum + ' sorted by ' + order + '
'); } var resizeColumn = function(instance, cell, width) { $('#log').append('The column ' + cell + ' resized to width ' + width + ' px
'); } var resizeRow = function(instance, cell, height) { $('#log').append('The row ' + cell + ' resized to height ' + height + ' px
'); } var selectionActive = function(instance, x1, y1, x2, y2, origin) { var cellName1 = jexcel.getColumnNameFromId([x1, y1]); var cellName2 = jexcel.getColumnNameFromId([x2, y2]); $('#log').append('The selection from ' + cellName1 + ' to ' + cellName2 + '
'); } var loaded = function(instance) { $('#log').append('New data is loaded
'); } var moveRow = function(instance, from, to) { $('#log').append('The row ' + from + ' was move to the position of ' + to + '
'); } var moveColumn = function(instance, from, to) { $('#log').append('The col ' + from + ' was move to the position of ' + to + '
'); } var blur = function(instance) { $('#log').append('The table ' + $(instance).prop('id') + ' is blur
'); } var focus = function(instance) { $('#log').append('The table ' + $(instance).prop('id') + ' is focus
'); } var paste = function(data) { $('#log').append('Paste on the table ' + $(instance).prop('id') + '
'); } var data = [ ['Mazda', 2001, 2000, '2006-01-01'], ['Pegeout', 2010, 5000, '2005-01-01'], ['Honda Fit', 2009, 3000, '2004-01-01'], ['Honda CRV', 2010, 6000, '2003-01-01'], ]; jexcel(document.getElementById('spreadsheet'), { data:data, rowResize:true, columnDrag:true, columns: [ { type: 'text', width:'200' }, { type: 'text', width:'100' }, { type: 'text', width:'100' }, { type: 'calendar', width:'100' }, ], onchange: changed, onbeforechange: beforeChange, oninsertrow: insertedRow, oninsertcolumn: insertedColumn, ondeleterow: deletedRow, ondeletecolumn: deletedColumn, onselection: selectionActive, onsort: sort, onresizerow: resizeRow, onresizecolumn: resizeColumn, onmoverow: moveRow, onmovecolumn: moveColumn, onload: loaded, onblur: blur, onfocus: focus, onpaste: paste, }); </script> </html>
2

Global Super event

One method to handle all events on jexcel.

NOTE: Open the console to see the events.