Introduction
There are a lot of plugin based grid CRUDs available online. In my free time, I spent a little time in making of custom inline editing with the help of jQuery and Ajax for CRUDs.
This short article of CRUDs with the help of inline actions
will help you have your own.
I wouldn't mind if you contribute a little in improving it ;)
Using the Code
First of all, let me start the structure that is for now "Necessary".
<form id="form">
<table class="table">
<tr>
<th>S.NO.
</th>
<th>header1
</th>
<th>header2
</th>
<th>Actions</th>
</tr>
<tbody>
<tr>
<td>column1</td>
<td data-target="samename1">
<label for="samename1">some html</label>
</td>
<td data-target="samename2">
<label for="samename2">some html</label>
</td>
<td>
<a href="javacript:;"
onclick="Edit(this,'idofthisrow')">
Edit</a>
<a href="javacript:;"
style="display:none"
onclick="Cancel(this,'idofthisrow')">
Cancel</a>
<a href="javacript:;"
style="display:none"
onclick="Update(this,'idofthisrow')">
Update</a>
<a href="javacript:;"
onclick="Delete(this,'idofthisrow')">
Delete</a>
</td>
</tr>
</tbody>
</table>
</form>
If you note, here the data-target
of column is the same name as of label
under it.
<td data-target="samename1">
<label for="samename1">some html</label>
</td>
Now it comes to Action
buttons:
- Edit
- Update
- Cancel
- Delete
On every button element, I have passed this
element and id
of current row:
<a href="javacript:;" onclick="Edit
(this,'idofthisrow')">
<i class="fa fa-pencil"></i></a>
Page Specific Scripts
<script type="text/javascript">
function siblingsEditor(ele) {
$(ele).parent().parent('tr').siblings().children('td').not
(':first-child').not(':last-child').each(function () {
var values;
if ($(this).children().is('input[type="text"]')) {
values = $(this).children('input').val();
}
else {
values = $(this).children('label').text();
}
var nameofthiselement = $(this).attr('data-target');
$(this).html('<label for="' +
nameofthiselement + '">' + values + '</label>');
});
}
function Edit(element, id) {
siblingsEditor(element);
$(element).hide();
$(element).next().show();
$(element).next().next().show();
$(element).parent().parent('tr').children('td').not
(':first-child').not(':last-child').each(function () {
var nameofthiselement = $(this).children().attr('for');
$(this).html('<input type="text"
class="form-control" name="' + nameofthiselement +
'" value="' + $(this).children('label').html() + '"></input>');
});
}
function Cancel(element, id) {
$(element).hide();
$(element).prev().show();
$(element).next().hide();
$(element).prev().prev().show();
$(element).parent().parent('tr').children('td').not
(':first-child').not(':last-child').each(function () {
var values;
if ($(this).children().is('input[type="text"]')) {
values = $(this).children('input').val();
}
else {
values = $(this).children('label').text();
}
var nameofthiselement = $(this).attr('data-target');
$(this).html('<label for="' +
nameofthiselement + '">' + values + '</label>');
});
}
function Update(element, id) {
$.ajax({
url: '/Controller/Action?ID=' + id,
type: 'POST',
data: $('#form').serialize(),
success: function (data) {
$(element).hide();
$(element).prev().hide();
$(element).prev().prev().show();
$(element).parent().parent('tr').children('td').not
(':first-child').not(':last-child').each(function () {
var values;
if ($(this).children().is('input[type="text"]')) {
values = $(this).children('input').val();
}
else {
values = $(this).children('label').text();
}
var nameofthiselement = $(this).attr('data-target');
$(this).html('<label for="' +
nameofthiselement + '">' + values + '</label>');
});
}
});
}
function Delete(element, id) {
$.post({'/controller/Actiion?ID=' + id,function (data) {
$(element).parent().parent().fadeOut();
}
});
}
</script>
Additionally
If you don't want some columns to be editable, you can define them in jQuery .not
.
Just plug it on your page to see results.