forked from Mirrors/apostrophe
191 lines
7.0 KiB
HTML
191 lines
7.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<title>Handsontable cell type - Handsontable</title>
|
|
|
|
<!--
|
|
Loading Handsontable (full distribution that includes all dependencies)
|
|
-->
|
|
<link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/handsontable.full.css">
|
|
<script data-jsfiddle="common" src="../dist/handsontable.full.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="Handsontable cell type">
|
|
<meta property="og:description"
|
|
content="This page shows very specific example of using Handsontable as a cell editor in Handsontable.">
|
|
<meta property="og:url" content="http://handsontable.com/demo/handsontable.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/handsontable.html">
|
|
|
|
<!--
|
|
Google Analytics for GitHub Page. Don't copy this to your project :)
|
|
-->
|
|
<script src="js/ga.js"></script>
|
|
|
|
<script data-jsfiddle="common">
|
|
function getCarData() {
|
|
return [
|
|
["Nissan", 2009, "black", "black"],
|
|
["Nissan", 2006, "blue", "blue"],
|
|
["Chrysler", 2004, "yellow", "black"],
|
|
["Volvo", 2012, "white", "gray"]
|
|
];
|
|
}
|
|
</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>Handsontable cell type</h2>
|
|
|
|
<p>This page shows using Handsontable as a cell editor in Handsontable (sometimes
|
|
referred as <strong>HOT-in-HOT</strong>).</p>
|
|
|
|
<p>HOT-in-HOT opens by any of the following:</p>
|
|
|
|
<ul>
|
|
<li><kbd>F2</kbd> or <kbd>ENTER</kbd> key is pressed while the cell is selected,</li>
|
|
<li>the triangle icon is clicked,</li>
|
|
<li>the cell content is double clicked.</li>
|
|
</ul>
|
|
|
|
<p>While HOT-in-HOT is opened, the text field above the HOT-in-HOT remains focused at all times.</p>
|
|
|
|
<p>Keyboard bindings while the HOT-in-HOT is opened:</p>
|
|
|
|
<ul>
|
|
<li><kbd>ESC</kbd> - close editor (cancel change),</li>
|
|
<li><kbd>ENTER</kbd> - close editor (apply change*), move the selection in the main HOT downwards (or according to <code>enterMoves</code> setting)</li>
|
|
<li><kbd>TAB</kbd> - behave as the ENTER key, but move the selection in the main HOT to the right (or according to <code>tabMoves</code> setting)</li>
|
|
<li><kbd>Arrow down</kbd> - move the selection in HOT-in-HOT downwards. If the last row was selected, has no effect.</li>
|
|
<li><kbd>Arrow up</kbd> - move the selection in HOT-in-HOT upwards. If the first row was selected, deselect. If HOT-in-HOT was deselected, behave as the ENTER key but move the selection in the main HOT upwards</li>
|
|
<li><kbd>Arrow right</kbd> - move the text cursor in the text field to the left. If the text cursor was at the start position, behave as the ENTER key but move the selection in the main HOT to the left</li>
|
|
<li><kbd>Arrow left</kbd> - move the text cursor in the text field to the right. If the text cursor was at the end position, behave as the TAB key</li>
|
|
</ul>
|
|
|
|
<p>Mouse click outside of the editor or on one of the cells in HOT-in-HOT applies change.</p>
|
|
|
|
<p><strong>*apply change</strong> means: The value of the cell highlighted or clicked in HOT-in-HOT is applied as new cell value in the main HOT. If no cell in HOT-in-HOT is selected, the value of the text field is used instead.</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>
|
|
</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 carData = getCarData(),
|
|
container = document.getElementById('example1'),
|
|
manufacturerData,
|
|
colors,
|
|
color,
|
|
colorData = [],
|
|
hot;
|
|
|
|
manufacturerData = [
|
|
{name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG'},
|
|
{name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC'},
|
|
{name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd'},
|
|
{name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation'},
|
|
{name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation'},
|
|
{name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group'}
|
|
];
|
|
colors = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];
|
|
|
|
while (color = colors.shift()) {
|
|
colorData.push([
|
|
[color]
|
|
]);
|
|
}
|
|
|
|
hot = new Handsontable(container, {
|
|
data: carData,
|
|
startRows: 7,
|
|
startCols: 4,
|
|
colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
|
|
columns: [
|
|
{
|
|
type: 'handsontable',
|
|
handsontable: {
|
|
colHeaders: ['Marque', 'Country', 'Parent company'],
|
|
data: manufacturerData
|
|
}
|
|
},
|
|
{type: 'numeric'},
|
|
{
|
|
type: 'handsontable',
|
|
handsontable: {
|
|
colHeaders: false,
|
|
data: colorData
|
|
}
|
|
},
|
|
{
|
|
type: 'handsontable',
|
|
handsontable: {
|
|
colHeaders: false,
|
|
data: colorData
|
|
}
|
|
}
|
|
]
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-text">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="outside-links-wrapper"></div>
|
|
|
|
</body>
|
|
</html>
|