forked from Mirrors/apostrophe
244 lines
7.8 KiB
HTML
244 lines
7.8 KiB
HTML
<!doctype 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>
|
|
<script data-jsfiddle="common" src="../dist/handsontable.full.js"></script>
|
|
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/handsontable.full.css">
|
|
|
|
<!--
|
|
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,
|
|
"@" + numeral(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,
|
|
"@" + numeral(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>
|