-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathindex.html
226 lines (210 loc) · 6.68 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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table Edits jQuery Plugin</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bower_components/skeleton/css/normalize.css">
<link rel="stylesheet" href="bower_components/skeleton/css/skeleton.css">
<link rel="stylesheet" href="bower_components/pikaday/css/pikaday.css">
<link rel="stylesheet" href="bower_components/pikaday-skeleton/css/pikaday-skeleton.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
<style>
body {
margin-bottom: 100px;
}
.row {
margin-bottom: 20px;
}
pre {
margin-top: 0;
}
.button.button-small {
height: 30px;
line-height: 30px;
padding: 0px 10px;
}
td input[type=text], td select {
width: 100%;
height: 30px;
margin: 0;
padding: 2px 8px;
}
th:last-child {
text-align: right;
}
td:last-child {
text-align: right;
}
td:last-child .button {
width: 30px;
height: 30px;
text-align: center;
padding: 0px;
margin-bottom: 0px;
margin-right: 5px;
background-color: #FFF;
}
td:last-child .button .fa {
line-height: 30px;
width: 30px;
}
</style>
</head>
<body>
<a href="https://github.com/nathancahill/table-edits"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
<div class="container">
<div class="row">
<div class="twelve columns" style="margin-top: 5%">
<h4>$.Table Edits</h4>
<p>
Table Edits is a light (1.7k) jQuery plugin for making table rows editable.
Built as minimally as possible so it's easy to extend.
</p>
<table class="u-full-width demo">
<thead>
<tr>
<th>Name</th>
<th>Birthday</th>
<th>Age</th>
<th>Sex</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr data-id="1">
<td data-field="name">Dave Gamache</td>
<td data-field="birthday">May 19, 2015</td>
<td data-field="age">26</td>
<td data-field="sex">Male</td>
<td>
<a class="button button-small edit" title="Edit">
<i class="fa fa-pencil"></i>
</a>
</td>
</tr>
<tr data-id="2">
<td data-field="name">Dwayne Johnson</td>
<td data-field="birthday">May 19, 2015</td>
<td data-field="age">42</td>
<td data-field="sex">Male</td>
<td>
<a class="button button-small edit" title="Edit">
<i class="fa fa-pencil"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="six columns">
<p>
<strong>Table Edits</strong> only does a couple things:
<ul>
<li>Replaces cell values with input fields on edit</li>
<li>Handles row editing state</li>
<li>Fires callbacks for edit, save and cancel</li>
</ul>
And <strong>optionally</strong>, a couple more:
<br /><br />
<ul>
<li>Binds a button or double click to start editing</li>
<li>Binds enter and escape keys to save and cancel</li>
<li>Maintains column widths when switching to edit</li>
<li>Create select fields instead of input fields</li>
</ul>
</p>
</div>
<div class="six columns">
<pre><code>$("table tr").editable({
keyboard: true,
dblclick: true,
button: true,
buttonSelector: ".edit",
dropdowns: {},
maintainWidth: true,
edit: function(values) {},
save: function(values) {},
cancel: function(values) {}
});</code></pre>
</div>
</div>
<div class="row">
<div class="twelve columns">
<p>
The only additional markup <strong>Table Edits</strong> requires
is a <code>data-field</code> attribute on each editable cell with it's column name.
</p>
</div>
</div>
<div class="row">
<div class="six columns">
<h5>Saving Table Data</h5>
<p>
Table Edits makes it easy to save edits. Callbacks are passed a <code>values</code>
object with column names and values of the edited row.
<br /><br />
Posting the new data to an API endpoint is simple.
</p>
</div>
<div class="six columns">
<pre><code>$("table tr").editable({
save: function(values) {
var id = $(this).data('id');
$.post('/api/object/' + id, values);
}
});</code></pre>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/momentjs/moment.js"></script>
<script src="bower_components/pikaday/pikaday.js"></script>
<script src="build/table-edits.min.js"></script>
<script>
$(function() {
var pickers = {};
$('table tr').editable({
dropdowns: {
sex: ['Male', 'Female']
},
edit: function(values) {
$(".edit i", this)
.removeClass('fa-pencil')
.addClass('fa-save')
.attr('title', 'Save');
pickers[this] = new Pikaday({
field: $("td[data-field=birthday] input", this)[0],
format: 'MMM D, YYYY'
});
},
save: function(values) {
$(".edit i", this)
.removeClass('fa-save')
.addClass('fa-pencil')
.attr('title', 'Edit');
if (this in pickers) {
pickers[this].destroy();
delete pickers[this];
}
},
cancel: function(values) {
$(".edit i", this)
.removeClass('fa-save')
.addClass('fa-pencil')
.attr('title', 'Edit');
if (this in pickers) {
pickers[this].destroy();
delete pickers[this];
}
}
});
});
</script>
</body>
</html>