@reactual/handsontable
Version:
Spreadsheet-like data grid editor
192 lines (159 loc) • 6.46 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>Pre-populate new rows from template - 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="Pre-populate new rows from template - Handsontable">
<meta property="og:description"
content="Below example shows how Legend match function can be used to present the template values for empty rows">
<meta property="og:url" content="http://handsontable.com/demo/prepopulate.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/prepopulate.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>Pre-populate new rows from template</h2>
<p>Below example shows how cell renderers can be used to present the template values for empty rows.</p>
<p>When any cell in the empty row is edited, the
<b>onChange</b> callback fills the row with the template values.</p>
<div id="example1"></div>
<style>
.placeholder {
color: #777;
font-style: italic;
}
</style>
<p>
<button name="dump" data-dump="#example1" data-instance="hot1" 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
tpl = ['one', 'two', 'three'],
data = [
['', 'Kia', 'Nissan', 'Toyota', 'Honda'],
['2008', 10, 11, 12, 13],
['2009', 20, 11, 14, 13],
['2009', 30, 15, 12, 13]
],
container = document.getElementById('example1'),
hot1;
function isEmptyRow(instance, row) {
var rowData = instance.getData()[row];
for (var i = 0, ilen = rowData.length; i < ilen; i++) {
if (rowData[i] !== null) {
return false;
}
}
return true;
}
function defaultValueRenderer(instance, td, row, col, prop, value, cellProperties) {
var args = arguments;
if (args[5] === null && isEmptyRow(instance, row)) {
args[5] = tpl[col];
td.style.color = '#999';
}
else {
td.style.color = '';
}
Handsontable.renderers.TextRenderer.apply(this, args);
}
hot1 = new Handsontable(container, {
startRows: 8,
startCols: 5,
minSpareRows: 1,
contextMenu: true,
cells: function (row, col, prop) {
var cellProperties = {};
cellProperties.renderer = defaultValueRenderer;
return cellProperties;
},
beforeChange: function (changes) {
var instance = hot1,
ilen = changes.length,
clen = instance.colCount,
rowColumnSeen = {},
rowsToFill = {},
i,
c;
for (i = 0; i < ilen; i++) {
// if oldVal is empty
if (changes[i][2] === null && changes[i][3] !== null) {
if (isEmptyRow(instance, changes[i][0])) {
// add this row/col combination to cache so it will not be overwritten by template
rowColumnSeen[changes[i][0] + '/' + changes[i][1]] = true;
rowsToFill[changes[i][0]] = true;
}
}
}
for (var r in rowsToFill) {
if (rowsToFill.hasOwnProperty(r)) {
for (c = 0; c < clen; c++) {
// if it is not provided by user in this change set, take value from template
if (!rowColumnSeen[r + '/' + c]) {
changes.push([r, c, null, tpl[c]]);
}
}
}
}
}
});
hot1.loadData(data);
</script>
</div>
</div>
</div>
<div class="footer-text">
</div>
</div>
</div>
</div>
</div>
<div id="outside-links-wrapper"></div>
</body>
</html>