Creating A Live Editable Table with jQuery - Tabledit
File Size: | 10.7 KB |
---|---|
Views Total: | 165247 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Tabledit is a small jQuery plugin that provides AJAX-enabled in-place editing for your table cells. The plugin has the ability to transform tables cells into input fields or select dropdowns with custom trigger events, to give the visitors a quick way to change cell values directly.
See also:
Basic usage:
1. Add the jQuery tabledit plugin after jQuery library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="jquery.tabledit.js"></script>
2. Call the plugin on your existing table and specify the editable columns whatever you like.
$('#my-table').Tabledit({ columns: { identifier: [0, 'id'], editable: [[1, 'First Name'], [2, 'Last Name']] } });
3. All the plugin options.
$('#my-table').Tabledit({ // link to server script // e.g. 'ajax.php' url: window.location.href, // class for form inputs inputClass: 'form-control input-sm', // // class for toolbar toolbarClass: 'btn-toolbar', // class for buttons group groupClass: 'btn-group btn-group-sm', // class for row when ajax request fails dangerClass: 'danger', // class for row when save changes warningClass: 'warning', // class for row when is removed mutedClass: 'text-muted', // trigger to change for edit mode. // e.g. 'dblclick' eventType: 'click', // change the name of attribute in td element for the row identifier rowIdentifier: 'id', // activate focus on first input of a row when click in save button autoFocus: true, // hide the column that has the identifier hideIdentifier: false, // activate edit button instead of spreadsheet style editButton: true, // activate delete button deleteButton: true, // activate save button when click on edit button saveButton: true, // activate restore button to undo delete action restoreButton: true, // custom action buttons buttons: { edit: { class: 'btn btn-sm btn-default', html: '<span class="glyphicon glyphicon-pencil"></span>', action: 'edit' }, delete: { class: 'btn btn-sm btn-default', html: '<span class="glyphicon glyphicon-trash"></span>', action: 'delete' }, save: { class: 'btn btn-sm btn-success', html: 'Save' }, restore: { class: 'btn btn-sm btn-warning', html: 'Restore', action: 'restore' }, confirm: { class: 'btn btn-sm btn-danger', html: 'Confirm' } }, // executed after draw the structure onDraw: function() { return; }, // executed when the ajax request is completed // onSuccess(data, textStatus, jqXHR) onSuccess: function() { return; }, // executed when occurred an error on ajax request // onFail(jqXHR, textStatus, errorThrown) onFail: function() { return; }, // executed whenever there is an ajax request onAlways: function() { return; }, // executed before the ajax request // onAjax(action, serialize) onAjax: function() { return; } });
Change logs:
2015-04-21
- Added 'bower.json' to use this package manager
- Added 'tbody' in the selector during the construction of the structure, to avoid problems with the 'tfoot'
- Now when you tab in a row, the form is saved. Only if there is no save button
2015-04-03
- Updated 'example.php' file
- Updated project page with examples and documentation
- Now if 'onAjax()' hook returns false, does not send the ajax request
- Added 'rowIdentifier' option to change the name of attribute in td element for the row identifier
- Fixed bug that allows you to change to edit mode with mouse click when the line was deleted
- Quick fix for issue that sometimes could not remove the warning class on the edited rows
2015-03-10
- Improved the select element
- Does not add hidden save button if the 'editButton' option is false
- Does not add hidden restore button if the 'deleteButton' option is false
- Added a new option 'autoFocus' to enable or not the focus in the first input when click in save button
- Added a new hook 'onAjax(action, serialize)' that runs before the ajax request
2015-03-08
- Added 'saveButton' and 'restoreButton' options.
- Added 'toolbarClass' and 'groupClass' options.
- Changed 'removeButton' option to 'deleteButton'.
- Changed 'remove' action to 'delete'.
- Removed 'textSelection' option, using CSS to prevent the text is selected with double click.
- Removed 'confirmText' option, because a button was created to confirm the removal.
- Removed form wrapped on table, because now it serialize inputs instead of the form.
- In 'buttons' option now have a new child 'action' to change name of action input ('edit', 'delete' and 'restore').
- Redesign of toolbox and changed name to toolbar.
- Minor code improvement.
- Fixed some bugs.
2015-03-06
- Fixed bug when creates the form wrapped on table.
2015-02-09
- Added toolbox column with edit and remove buttons.
- Added effect on table row when ajax request fails.
- Added effect on table row when changes are saved with success.
- Added 'onAlways()' hook, that is executed whenever there is an ajax request.
- Change 'onComplete(response)' hook to 'onSuccess(data, textStatus, jqXHR)'.
- Change 'onError()' hook to 'onFail(jqXHR, textStatus, errorThrown)'.
- Fixed some minor bugs.
- Minor code improvement.
This awesome jQuery plugin is developed by markcell. For more Advanced Usages, please check the demo page or visit the official website.