227 lines
6.7 KiB
HTML
227 lines
6.7 KiB
HTML
<!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 lightweight 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>
|