@reactual/handsontable
Version:
Spreadsheet-like data grid editor
160 lines (132 loc) • 5.57 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>beforeKeyDown callback - Handsontable</title>
<!--
Loading Handsontable (full distribution that includes all dependencies)
-->
<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">
<!--
Facebook open graph. Don't copy this to your project :)
-->
<meta property="og:title" content="beforeKeyDown callbacks">
<meta property="og:description"
content="">
<meta property="og:url" content="http://handsontable.com/demo/beforeKeyDown.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/beforeKeyDown.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">
<a name="lazy"></a>
<h2>beforeKeyDown callback</h2>
<p>The following demo uses <code>beforeKeyDown</code> callback to modify some key bindings:</p>
<ul>
<li>Pressing DELETE or BACKSPACE on a cell deletes the cell and shifts all cells beneath it in the column up
resulting in the cursor (which doesn't move) having the value previously beneath it, now in the current
cell.
</li>
<li>Pressing ENTER in a cell (not changing the value) results in pushing all the cells in the column beneath
this cell down one row (including current cell) resulting in a blank cell under the cursor (which hasn't
moved)
</li>
</ul>
<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>
</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 = [
['Nissan', 2009, 'black', 'black'],
['Nissan', 2006, 'blue', 'blue'],
['Chrysler', 2004, 'yellow', 'black'],
['Volvo', 2012, 'yellow', 'gray']
],
container = document.getElementById("example1"),
lastChange = null,
hot;
hot = new Handsontable(container, {
data: data,
colHeaders: true,
rowHeaders: true,
minSpareRows: 1,
beforeChange: function (changes, source) {
lastChange = changes;
}
});
hot.updateSettings({
beforeKeyDown: function (e) {
var selection = hot.getSelected();
// BACKSPACE or DELETE
if (e.keyCode === 8 || e.keyCode === 46) {
Handsontable.dom.stopImmediatePropagation(e);
// remove data at cell, shift up
hot.spliceCol(selection[1], selection[0], 1);
e.preventDefault();
}
// ENTER
else if (e.keyCode === 13) {
// if last change affected a single cell and did not change it's values
if (lastChange && lastChange.length === 1 && lastChange[0][2] == lastChange[0][3]) {
Handsontable.dom.stopImmediatePropagation(e);
hot.spliceCol(selection[1], selection[0], 0, ''); // add new cell
hot.selectCell(selection[0], selection[1]); // select new cell
}
}
lastChange = null;
}
}
);
</script>
</div>
</div>
</div>
<div class="footer-text">
</div>
</div>
</div>
</div>
</div>
<div id="outside-links-wrapper"></div>
</body>
</html>