@reactual/handsontable
Version:
Spreadsheet-like data grid editor
249 lines (204 loc) • 8.37 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>Callbacks - Handsontable</title>
<!--
Loading Handsontable (full distribution that includes all dependencies apart from jQuery)
-->
<script data-jsfiddle="common" src="../demo/js/jquery.min.js"></script>
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/handsontable.css">
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/pikaday/pikaday.css">
<script data-jsfiddle="common" src="../dist/pikaday/pikaday.js"></script>
<script data-jsfiddle="common" src="../dist/moment/moment.js"></script>
<script data-jsfiddle="common" src="../dist/numbro/numbro.js"></script>
<script data-jsfiddle="common" src="../dist/numbro/languages.js"></script>
<script data-jsfiddle="common" src="../dist/handsontable.js"></script>
<!--
Loading demo dependencies. They are used here only to enhance the examples on this page
-->
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="css/samples.css?20140331">
<script src="js/samples.js"></script>
<script src="js/highlight/highlight.pack.js"></script>
<link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<script src="js/json2.min.js"></script>
<!--
Facebook open graph. Don't copy this to your project :)
-->
<meta property="og:title" content="Callbacks">
<meta property="og:description"
content="This page shows usage of some callbacks available in Handsontable">
<meta property="og:url" content="http://handsontable.com/demo/callbacks.html">
<meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="409">
<meta property="og:image:height" content="164">
<link rel="canonical" href="http://handsontable.com/demo/callbacks.html">
<!--
Google Analytics for GitHub Page. Don't copy this to your project :)
-->
<script src="js/ga.js"></script>
</head>
<body>
<div class="wrapper">
<div class="wrapper-row">
<div id="global-menu-clone">
<h1><a href="../index.html">Handsontable</a></h1>
</div>
<div id="container">
<div class="columnLayout">
<div class="rowLayout">
<div class="descLayout">
<div class="pad" data-jsfiddle="example1">
<h2>Callbacks</h2>
<p>
This page shows usage of some callbacks available in Handsontable. Full list of callbacks is available in <a
href="https://github.com/handsontable/handsontable">README.md</a>.
</p>
<p>
If you require a new callback to be added to Handsontable, please open an <a
href="https://github.com/handsontable/handsontable/issues">Issue</a>.
</p>
<p>
Note that some checkboxes below are initially unchecked (not all callbacks are displayed on this page by default).
</p>
<div id="example1"></div>
<p>
<button name="dump" data-dump="#example1" data-instance="hot" title="Prints current data source to Firebug/Chrome Dev Tools">
Dump data to console
</button>
</p>
<h3>Events log
<button onclick="$('#example1_events').empty()">
Clear
</button>
</h3>
<div id="example1_events"
style="height: 250px; overflow: hidden; background-color: #fdfdfd; font-size: 11px"></div>
<p>Choose events to be logged:</p>
<ul class="tight" id="hooksList">
<li><label><input type="checkbox" id="check_select_all"> <strong>select all</strong></label></li>
</ul>
</div>
</div>
<div class="codeLayout">
<div class="pad">
<div class="jsFiddle">
<button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
</div>
<script data-jsfiddle="example1">
var data = [
['', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],
['2009', 0, 2941, 4303, 354, 5814],
['2010', 3, 2905, 2867, 412, 5284],
['2011', 4, 2517, 4822, 552, 6127],
['2012', 2, 2422, 5399, 776, 4151]
],
example1 = document.getElementById('example1'),
config,
$hooksList,
hooks,
hot;
config = {
data: data,
minRows: 5,
minCols: 6,
minSpareRows: 1,
autoWrapRow: true,
colHeaders: true,
contextMenu: true
};
$hooksList = $('#hooksList');
hooks = Handsontable.hooks.getRegistered();
hooks.forEach(function(hook) {
var checked = '';
if (hook !== 'modifyRowHeight' && hook !== 'modifyRow' && hook !== 'modifyCol' &&
hook !== 'afterRenderer' && hook !== 'beforeGetCellMeta' && hook !== 'afterGetCellMeta') {
checked = 'checked';
}
$hooksList.append('<li><label><input type="checkbox" ' + checked + ' id="check_' + hook + '"> ' + hook + '</label></li>');
config[hook] = function() {
log_events(hook, arguments);
}
});
var start = (new Date()).getTime();
var i = 0;
var timer;
var example1_events = document.getElementById("example1_events");
function log_events(event, data) {
if (document.getElementById('check_' + event).checked) {
var now = (new Date()).getTime(),
diff = now - start,
vals, str, div, text;
vals = [
i,
"@" + numbro(diff / 1000).format('0.000'),
"[" + event + "]"
];
for (var d = 0; d < data.length; d++) {
try {
str = JSON.stringify(data[d]);
}
catch (e) {
str = data[d].toString(); // JSON.stringify breaks on circular reference to a HTML node
}
if (str === void 0) {
continue;
}
if (str.length > 20) {
str = Object.prototype.toString.call(data[d]);
}
if (d < data.length - 1) {
str += ',';
}
vals.push(str);
}
if (window.console) {
console.log(i,
"@" + numbro(diff / 1000).format('0.000'),
"[" + event + "]",
data);
}
div = document.createElement("DIV");
text = document.createTextNode(vals.join(" "));
div.appendChild(text);
example1_events.appendChild(div);
clearTimeout(timer);
timer = setTimeout(function() {
example1_events.scrollTop = example1_events.scrollHeight;
}, 10);
i++;
}
}
example1 = document.getElementById('example1');
hot = new Handsontable(example1,config);
$('#check_select_all').click(function () {
var state = this.checked;
$('input[type=checkbox]').each(function () {
if (state === true) {
if (this.id === 'check_modifyRow') {
return; //too much noise in the log
}
}
this.checked = state;
});
});
$('input[type=checkbox]').click(function () {
if (!this.checked) {
document.getElementById('check_select_all').checked = false;
}
});
</script>
</div>
</div>
</div>
<div class="footer-text">
</div>
</div>
</div>
</div>
</div>
<div id="outside-links-wrapper"></div>
</body>
</html>