@quantlab/handsontable
Version:
Spreadsheet-like data grid editor that provides copy/paste functionality compatible with Excel/Google Docs
222 lines (188 loc) • 7.84 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<title>PHP example - 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">
<!--
Facebook open graph. Don't copy this to your project :)
-->
<meta property="og:title" content="PHP example - Handsontable">
<meta property="og:description"
content="This page loads and saves data on server. In this example, client side uses $.ajax. Server side uses PHP with PDO (SQLite)">
<meta property="og:url" content="http://handsontable.com/demo/php.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/php.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>PHP example</h2>
<p>This page loads and saves data on server. In this example, client side uses <b>$.ajax</b>. Server side uses
<b>PHP with PDO (SQLite)</b>.</p>
<p>Please note. This page and the PHP scripts are a work in progress. They are not yet configured on GitHub.
Please run it on your own localhost.</p>
<p>
<button name="load">Load</button>
<button name="save">Save</button>
<button name="reset">Reset</button>
<label><input type="checkbox" name="autosave" checked="checked" autocomplete="off"> Autosave</label>
</p>
<div id="exampleConsole" class="console">Click "Load" to load data from server</div>
<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">
<script>
var
$container = $("#example1"),
$console = $("#exampleConsole"),
$parent = $container.parent(),
autosaveNotification,
hot;
hot = new Handsontable($container[0], {
columnSorting: true,
startRows: 8,
startCols: 3,
rowHeaders: true,
colHeaders: ['Manufacturer', 'Year', 'Price'],
columns: [
{},
{},
{}
],
minSpareCols: 0,
minSpareRows: 1,
contextMenu: true,
afterChange: function (change, source) {
var data;
if (source === 'loadData' || !$parent.find('input[name=autosave]').is(':checked')) {
return;
}
data = change[0];
// transform sorted row to original row
data[0] = hot.sortIndex[data[0]] ? hot.sortIndex[data[0]][0] : data[0];
clearTimeout(autosaveNotification);
$.ajax({
url: 'php/save.php',
dataType: 'json',
type: 'POST',
data: {changes: change}, // contains changed cells' data
success: function () {
$console.text('Autosaved (' + change.length + ' cell' + (change.length > 1 ? 's' : '') + ')');
autosaveNotification = setTimeout(function () {
$console.text('Changes will be autosaved');
}, 1000);
}
});
}
});
$parent.find('button[name=load]').click(function () {
$.ajax({
url: 'php/load.php',
dataType: 'json',
type: 'GET',
success: function (res) {
var data = [], row;
for (var i = 0, ilen = res.cars.length; i < ilen; i++) {
row = [];
row[0] = res.cars[i].manufacturer;
row[1] = res.cars[i].year;
row[2] = res.cars[i].price;
data[res.cars[i].id - 1] = row;
}
$console.text('Data loaded');
hot.loadData(data);
}
});
}).click(); // execute immediately
$parent.find('button[name=save]').click(function () {
$.ajax({
url: 'php/save.php',
data: {data: hot.getData()}, // returns all cells' data
dataType: 'json',
type: 'POST',
success: function (res) {
if (res.result === 'ok') {
$console.text('Data saved');
}
else {
$console.text('Save error');
}
},
error: function () {
$console.text('Save error');
}
});
});
$parent.find('button[name=reset]').click(function () {
$.ajax({
url: 'php/reset.php',
success: function () {
$parent.find('button[name=load]').click();
},
error: function () {
$console.text('Data reset failed');
}
});
});
$parent.find('input[name=autosave]').click(function () {
if ($(this).is(':checked')) {
$console.text('Changes will be autosaved');
}
else {
$console.text('Changes will not be autosaved');
}
});
</script>
</div>
</div>
</div>
<div class="footer-text">
</div>
</div>
</div>
</div>
</div>
<div id="outside-links-wrapper"></div>
</body>
</html>