in this post, We will create a simple example of how to use jqGrid with RESTful web services for adding, editing, and deleting records.jqGrid is a popular ajax based table grid plugin using jQuery and jQuery UI.
I previously posted a tutorial on creating table listings and pagination using jqgrid listing and rest services. We’ll expand on that jqgrid tutorial and enhance the jqgrid table listing with additional features.
You can also check other tutorials on table plugin,
- jQuery jqGrid Example with JSON Data Using Rest Service
- Datatables Example with JSON Data Using Rest WebService
- Simple Example and Use of jQuery Flexigrid
- Best Free jQuery Table and Grid Plugins
Simple jQgrid Example with Add, Edit, Delete Record Functionality
I am assuming you have read my previous jQgrid Example tutorial and have all jqgrid js and CSS files. We will make all JavaScript code changes into index.html file.
First, we will add a new record, edit and Delete button into the jQgrid table, we need to add 'true' property of add, edit, and delete options which are associated with the jQgrid instance,
edit:false, add:false, del:false,
Change false to true property that will show the add, edit, and delete buttons in the footer of the jQgrid table, after the required changes the previous code will become like the below,
edit:true, edittitle: "Edit Post", width: 500, add:true, addtitle: "Add Post", width: 500, del:true,
jQgrid provides many customization options table column-wise like you can enable column sorting, change the column width, the hidden column from view, etc from colModel[] object.
You can also add editable: true property that will enable edit functionality on a particular column, if you don’t want to show a column in the edit modal window, you need to set editable: false against that column.
Now, I am enabling edit functionality on userId, title and body column, the jQgrid column code will look like the below,
colModel:[
{name:'id',index:'id', width:55, editable: false},
{name:'userId',index:'userId', width:55, editable: true},
{name:'title',index:'title', width:300, editable: true},
{name:'body',index:'body', width:350, sortable:false, editable: true, edittype:"textarea"}
],
after that, you can see the add, edit modal window will open on-click of edit window(please make sure at least one row will select from jQgrid table) with userid, title and body input option.
Now, We will add edit, add and delete jQgrid call-back method which will handle submitted data using ajax. We will use jQgrid Add, Edit, and Delete method using jQuery ajax.
I am using Restful Web Services, You can use your own server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl. We will create a separate function for all crud operations and send ajax requests to the server.
How to Add Record in jQgrid Using Ajax
I will use add a call-back function into jQgrid instance and pass parameters like window header, reload grid after add record, etc.
//add Options. save key parameter will keybind the Enter key to submit.
{
addCaption: "Add Post",
addtext: "Add",
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
errorTextFormat: commonError,
width: "500",
reloadAfterSubmit: true,
bottominfo: "Fields marked with (*) are required",
top: "60",
left: "5",
right: "5",
onclickSubmit: function (response, postdata) {
AddPost(postdata);
}
}
All options are well defined as you can see, You can easily understand property as the name mentioned in the object and what they will do. I have added AddPost() function that will handle Ajax requests and send posted data to the server using GET HTTP method.
function AddPost(params) {
//Here you need to define ajax call for insert records to server
console.log(params);
}
I leave the Ajax request code, you can add the Ajax method property as per your requirement.
We have used a common error function to throw an error when an error occurs in the crud operation of jQgrid, You can change that function as per your requirement. We will define a new commonError() function that will return an error message when an error occurs.
function commonError(data) {
return "Error Occured during Operation. Please try again";
}
How to Edit Record in jQgrid Using Ajax
I will use the edit call-back function of jQgrid instance and pass parameters like window header, reload grid after add record etc.
//Edit Options. save key parameter will keybind the Enter key to submit.
{
editCaption: "Edit Post",
edittext: "Edit",
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
errorTextFormat: commonError,
width: "500",
reloadAfterSubmit: true,
bottominfo: "Fields marked with (*) are required",
top: "60",
left: "5",
right: "5",
onclickSubmit: function (response, postdata) {
//call edit button
EditComment(postdata);
}
}
All options are the same as the previous add record into jQgrid. I have added the EditComment() function that will handle edit Ajax requests and send posted data to the server using the POST method.
function EditPost(params) {
//Here you need to define ajax call for update records to server
console.log(params);
}
here you will get all your posted data in console.log().
How to Delete Record in jQgrid Using Ajax
Delete record is another common functionality in grid listing. You need to add delete call-back function into the jQgrid instance and pass parameters like delete window header, send a request on ENTER button clicked etc.
//delete Options. save key parameter will keybind the Enter key to submit.
{
deleteCaption: "delete Post",
deletetext: "Delete Post",
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
errorTextFormat: commonError,
width: "500",
reloadAfterSubmit: true,
bottominfo: "Fields marked with (*) are required",
top: "60",
left: "5",
right: "5",
onclickSubmit: function (response, postdata) {
DeletePost(postdata);
}
}
All options are the same as the previous edit record model. I have added DeletePost() function that will handle Ajax request and send posted data to the server using DELETE HTTP method.
function DeletePost(params) {
//Here you need to define ajax call for insert records to server
console.log(params);
}
here you will get all your posted data in console.log().
How To View Single Record View into the jQgrid table
Sometimes we have a lot of data in a single record but screen resolution has a limit to displaying data, so that we could not show all column data in a single row in jQgrid grid table.
We will show only useful data in the table column when jQgrid table loads and the rest of the information will show on a view of a single record.
jQgrid provides a single record view modal window using view:true property. We need to add this property to pager('#pager2') jqgrid instance.
$("#photos").jqGrid('navGrid','#pager2',
{
edit:true, edittitle: "Edit Post", width: 500,
add:true, addtitle: "Add Post", width: 500,
del:true,
view:true
}
view:true property will add a magnifying glass into the footer of the jQgrid table that helps to view a single record
How To enable searching in jQgrid table
Searching records is a very important functionality on any table listing grid. We will enable search record functionality into jQgrid using search: true property. You need to add this property into the pager jqgrid instance.
$("#photos").jqGrid('navGrid','#pager2',
{
edit:true, edittitle: "Edit Post", width: 500,
add:true, addtitle: "Add Post", width: 500,
del:true,
view:true,
search: true
}
Enable the Refresh table Button in jQgrid table
Refresh is used to reload jQgrid table data, sometimes table is not refreshing on action that time you need to refresh table data manually. jQgrid provides refresh: true property that enables to add refresh icon into the footer of jQgrid table. You need to add this property into the pager jqgrid instances.
$("#photos").jqGrid('navGrid','#pager2',
{
edit:true, edittitle: "Edit Post", width: 500,
add:true, addtitle: "Add Post", width: 500,
del:true,
view:true,
search: true,
refresh: true
}
Conclusion
This jQgrid example tutorial helps to create a new record in the database, edit an existing record using Ajax and delete a record using Ajax. I have added basic crud functionality on the jQgrid table. There are a lot of advanced options available in jQgrid plugin, you can explore more jQgrid features as per your requirements.
You can download the source code and Demo from the below link.
Cant download the source code
I have fixed, now you can download it
Thanks for lot very help full your this project