How to Add, Edit and Delete a row in jQuery Flexigrid Using PHP and MySQL

jQuery Flexigrid is very popular grid plugin which is convert HTML table into beautiful and full functional grid listing. Flexigrid support pagination, sorting, searching, dynamic column binding and fixed column width etc, Earlier i have shared flexigrid article about 1.0 but in this post i will use jquery flexigrid 1.1.I will demonstrate add,edit and delete records using Ajax in flexigrid.

flexigrid has only dependent library is jquery. We will learn how to add, edit and delete records in flexigrid using php, MySQL and Ajax.

Add,Edit and Delete records using Flexigrid, PHP and MySQL

add-edit-flexigrid

jQuery Flexigrid has in-built callback function to fire add, edit and delete action.We just create a function which will handle flexigrid action and passed to appropriate ajax method for add,edit and delete record.

I am using following files and folder

js folder:This folder will contains all js libs of jquery and flexigrid.
css folder:This folder will contains all css libs of jquery and flexigrid.
images folder:This folder will contains all images of jquery and flexigrid.
index.php:This file will use to create HTML layout and handle ajax response.
connection.php:This file will use to create database connection.
response.php:This file will use to handle all serverside fucntionality. I will create add,edit,delete action method and return back json response to ajax method.

Also Checkout other tutorials of flexi grid,

How to add listing records in Flexigrid

Step 1: Created connection.php file to handle database connection and return db connection object.

Where is:

  1. $servername: your mysql db hostname
  2. $username: mysql db username
  3. $password: mysql db pass
  4. $dbname: database name

Step 2: Included all js and css files into head section of index.php file.

Step 3: Create HTML table for listing data in index.php file.

Step 4: Applied flexigrid constructor method on HTML table.The flexigrid method converts HTML table into beautiful grid listing.

Added above jquery code into footer of index.php file.

Step 5: Added action handler in response.php file.

How to Insert/Add record in Flexigrid

There are add,edit and delete button images which will need to add in flexigrid plugin using css class.We need to add below css class in head of index.php file.
[code type=css]

Step 1: Added Bootstrap add modal box to add record in index.php file.

Step 2: Added callback method in buttons array under flexigrid constructor,

here we have mentioned gridAction() JavaScript method which will call on add button click.

Step 3: Added java-script method gridAction() which will handle add record flexigrid event.

Step 4: Added event on submit button to add modal input values ans send from data to response.php.

Step 5: Added ajaxAction() method which will fire ajax request to server-side. We will passed json data to server side using ajax technology.

Step 6: Added a switch option in response.php file.

Step 7: Added add action method in response.php file which will insert record in mysql database and send status.

How to Edit/Update Record in Flexigrid

Step 1: Added Bootstrap edit modal box to update record in index.php file.

Step 2: Added callback method in buttons array under flexigrid constructor,

here we have mentioned gridAction() function which will call on edit button click event.

Step 3: Added java-script method gridAction() which will handle add record flexigrid event.

Step 4: Added click event on submit button to edit modal input values.

Step 5: Added updateEmployee() method into switch option in response.php file.

Step 6: Added add action method in response.php file which will update record in mysql database and send status.

How to add Delete record in Flexigrid

You need to select row in flexigrid then click delete record button otherwise you will get 0 row selected message.

Step 1: Added callback method in buttons array under flexigrid constructor,

here we have mentioned gridAction() method which will call on delete button clicked event.

Step 2: Added JavaScript method gridAction() which will handle delete record flexigrid event.

Step 3: Added deleteEmployee()method into a switch option in response.php file.

Step 4: Added add action method in response.php file which will insert record in MySQL database and send status.

You can download source code and Demo from below link.

Conclusion :

In previous tutorial, we have learn listing of flexigrid with PHP and MySQL.This tutorials help to add crud functionality with flexigrid using ajax.I ha demonstrate about how to add, edit and delete row using php,mysql and ajax.

4 thoughts on “How to Add, Edit and Delete a row in jQuery Flexigrid Using PHP and MySQL

Leave a Reply

Your email address will not be published. Required fields are marked *