173 lines
9.5 KiB
HTML
173 lines
9.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
|
||
|
|
<title>Tiny editable jQuery Bootstrap spreadsheet from MindMup</title>
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<meta name="keywords" content="opensource jquery bootstrap editable table spreadsheet" />
|
||
|
|
<meta name="description" content="This tiny jQuery bootstrap plugin turns any table into an editable spreadsheet" />
|
||
|
|
<link rel="apple-touch-icon" href="https://d1g6a398qq2djm.cloudfront.net/img/apple-touch-icon.png" />
|
||
|
|
<link rel="shortcut icon" href="https://d1g6a398qq2djm.cloudfront.net/img/favicon.ico" />
|
||
|
|
<link href="external/google-code-prettify/prettify.css" rel="stylesheet">
|
||
|
|
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
|
||
|
|
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
|
||
|
|
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
|
||
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
|
||
|
|
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
|
||
|
|
<script src="external/google-code-prettify/prettify.js"></script>
|
||
|
|
<link href="index.css" rel="stylesheet">
|
||
|
|
<script src="mindmup-editabletable.js"></script>
|
||
|
|
<script src="numeric-input-example.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="hero-unit">
|
||
|
|
<div class="pull-right">
|
||
|
|
<div class="fb-like" data-href="https://facebook.com/mindmupapp" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div><br/>
|
||
|
|
<a href="https://twitter.com/mindmup" class="twitter-follow-button" data-show-count="true" data-show-screen-name="true" data-lang="en">Follow @mindmup</a>
|
||
|
|
</div>
|
||
|
|
<h1>editableTableWidget<br/> <small>tiny editable jQuery Bootstrap spreadsheet</small></h1>
|
||
|
|
<hr/>
|
||
|
|
<div class="alert alert-error hide">
|
||
|
|
That would cost too much
|
||
|
|
</div>
|
||
|
|
<table id="mainTable" class="table table-striped">
|
||
|
|
<thead><tr><th>Name</th><th>Cost</th><th>Profit</th><th>Fun</th></tr></thead>
|
||
|
|
<tbody>
|
||
|
|
<tr><td>Car</td><td>100</td><td>200</td><td>0</td></tr>
|
||
|
|
<tr><td>Bike</td><td>330</td><td>240</td><td>1</td></tr>
|
||
|
|
<tr><td>Plane</td><td>430</td><td>540</td><td>3</td></tr>
|
||
|
|
<tr><td>Yacht</td><td>100</td><td>200</td><td>0</td></tr>
|
||
|
|
<tr><td>Segway</td><td>330</td><td>240</td><td>1</td></tr>
|
||
|
|
</tbody>
|
||
|
|
<tfoot><tr><th><strong>TOTAL</strong></th><th></th><th></th><th></th></tr></thead>
|
||
|
|
</table>
|
||
|
|
<h2><small>just start typing to edit, or move around with arrow keys or mouse clicks!</small></h2>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="span6">
|
||
|
|
<h2>About</h2>
|
||
|
|
<p>
|
||
|
|
This <a href="https://github.com/mindmup/editable-table/blob/master/mindmup-editabletable.js">tiny (3KB, < 120 lines) jQuery plugin</a> turns any
|
||
|
|
table into an editable spreadsheet.
|
||
|
|
Here are the key features:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>No magic - works on a normal HTML table (so you can plug it in into any web table, and apply any JS function to calculate values)</li>
|
||
|
|
<li>Supports validation and change events (so you can warn about invalid input or prevent invalid changes)</li>
|
||
|
|
<li>Uses standard DOM focus for selection (so does not interrupt scrolling or tabbing outside the table)</a></li>
|
||
|
|
<li>Input automatically copies underlying table cell styling</li>
|
||
|
|
<li>Native copy/paste support</li>
|
||
|
|
<li>Does not force any styling (so you can style it any way you want, using normal CSS)</li>
|
||
|
|
<li>Works well with Bootstrap</li>
|
||
|
|
<li>Depends only on jQuery</li>
|
||
|
|
<li>Tested in Chrome 32, Firefox 26, IE 10, Safari 7, Android Chrome and iOS 7 Safari</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Usage</h2>
|
||
|
|
<pre class="prettyprint ">
|
||
|
|
$('#table').editableTableWidget();
|
||
|
|
</pre>
|
||
|
|
<p>Use a text area instead of input field to input (or supply a custom editor element)</p>
|
||
|
|
<pre class="prettyprint ">
|
||
|
|
$('#table').editableTableWidget({editor: $('<textarea>')});
|
||
|
|
</pre>
|
||
|
|
<p>Make sure that the editor clones some specific CSS properties of the underlying cell</p>
|
||
|
|
<pre class="prettyprint ">
|
||
|
|
$('#table').editableTableWidget({
|
||
|
|
cloneProperties: ['background', 'border', 'outline']
|
||
|
|
});
|
||
|
|
</pre>
|
||
|
|
<p>Mark content as invalid during editing (for example, change one of the item names above to blank or try to enter a non-numeric cost)</p>
|
||
|
|
<pre class="prettyprint">
|
||
|
|
$('table td').on('validate', function(evt, newValue) {
|
||
|
|
if (....) {
|
||
|
|
return false; // mark cell as invalid
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</pre>
|
||
|
|
<p>Act on a change (or even reject it). This is how the numbers above recalculate. Also, try to increase total cost over 5000!</p>
|
||
|
|
<pre class="prettyprint">
|
||
|
|
$('table td').on('change', function(evt, newValue) {
|
||
|
|
// do something with the new cell value
|
||
|
|
if (....) {
|
||
|
|
return false; // reject change
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
<div class="span6" >
|
||
|
|
<h2>Why?</h2>
|
||
|
|
|
||
|
|
<a href="https://www.mindmup.com"><img class="span5" src="https://mindmup.github.io/promo-868x350.png"></a>
|
||
|
|
<br clear="all" />
|
||
|
|
<p>
|
||
|
|
We built a tabular data editor for <a href="https://www.mindmup.com">MindMup</a>. Yes, there are plenty of existing widgets such as this, but
|
||
|
|
the ones we could find were either too magic (automatically generated tables with custom styles, interrupting normal focus flow, faking selection with background styles, flash-based copy-paste)
|
||
|
|
or too big (good ones start at 200KB).</p>
|
||
|
|
<p>MindMup targets recent browsers, so with HTML5, everything we need can fit into less than 3K. We built this tiny tiny
|
||
|
|
editor that does everything we need, does not impose
|
||
|
|
any particular additional CSS, does not fight DOM but uses it as normal, works well with Bootstrap styling, and fits nicely into jQuery event processing. </p>
|
||
|
|
<p>It's released under the MIT license, so fork and enjoy! </p>
|
||
|
|
<h2>FAQ</h2>
|
||
|
|
<h4>Can the widget insert rows and columns?</h4>
|
||
|
|
<p>It works on your HTML table. Just use normal DOM manipulation to insert rows and cells. You don't need to extend the widget for that. You can bind a keystroke to the table or some buttons to do that, for example.</p>
|
||
|
|
<h4>Can the widget apply numeric functions?</h4>
|
||
|
|
<p>It works on your HTML table. Just use normal javascript/DOM manipulation to calculate stuff. Listen to the change event and recalculate (<a href="https://github.com/mindmup/editable-table/blob/master/numeric-input-example.js">see an example</a>).</p>
|
||
|
|
<h4>Can the widget sync with a background data model?</h4>
|
||
|
|
<p>It works on your HTML table, so just use HTML5 data binding or whatever you would normally use to sync with the DOM, and normal javascript/DOM manipulation to update. You don't need to tell the widget about updates.
|
||
|
|
To sync in the other direction, subscribe to the change event.</p>
|
||
|
|
<h4>How do I post data to my server?</h4>
|
||
|
|
<p>It works on your HTML table, so use standard DOM functions to pull the data from the table, and use jQuery to post to the server</p>
|
||
|
|
<h4>What other widgets are there?</h4>
|
||
|
|
<p>This widget is intentionally minimalistic. If you need more magic and "it works on your HTML table" is not a good answer for you, then check out <a href="http://handsontable.com/">HandsonTable</a> or <a href="https://github.com/mleibman/SlickGrid">SlickGrid</a>.</p>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="span6 offset3">
|
||
|
|
<p style="text-align:center;">
|
||
|
|
<a class="btn btn-large btn-primary jumbo" href="https://github.com/mindmup/editable-table">View project on Github</a>
|
||
|
|
<a class="btn btn-large jumbo" href="mailto:contact@mindmup.com"><i class="icon-envelope"></i></a>
|
||
|
|
<a class="btn btn-large jumbo" href="https://facebook.com/mindmupapp"><i class="icon-facebook"></i></a>
|
||
|
|
<a class="btn btn-large jumbo" href="https://twitter.com/mindmup"><i class="icon-twitter"></i></a>
|
||
|
|
<a class="btn btn-large jumbo" href="https://plus.google.com/u/0/communities/112831595986131146219"><i class="icon-google-plus"></i></a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$('#mainTable').editableTableWidget().numericInputExample().find('td:first').focus();
|
||
|
|
$('#textAreaEditor').editableTableWidget({editor: $('<textarea>')});
|
||
|
|
window.prettyPrint && prettyPrint();
|
||
|
|
</script>
|
||
|
|
<a href="https://github.com/mindmup/editable-table"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
|
||
|
|
<div id="fb-root"></div>
|
||
|
|
<script>
|
||
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||
|
|
ga('create', 'UA-37452180-6', 'github.io');
|
||
|
|
ga('send', 'pageview');
|
||
|
|
</script>
|
||
|
|
<script>(function(d, s, id) {
|
||
|
|
var js, fjs = d.getElementsByTagName(s)[0];
|
||
|
|
if (d.getElementById(id)) return;
|
||
|
|
js = d.createElement(s); js.id = id;
|
||
|
|
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
|
||
|
|
fjs.parentNode.insertBefore(js, fjs);
|
||
|
|
}(document, 'script', 'facebook-jssdk'));
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|