This repository has been archived by the owner on Jul 24, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 324
/
index.html
172 lines (161 loc) · 9.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!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:[email protected]"><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>