Build CRUD DataGrid with jQuery EasyUI

Tutorial » Build CRUD DataGrid with jQuery EasyUI

In the previous tutorial we create a crud application that using dialog component to create or edit user information. This tutorial will show you how to create a crud datagrid. We will use the editable datagrid plugin to make these crud actions work.

Step 1: Define DataGrid in HTML tag

Step 2: Make an editable DataGrid

We should provide the 'url','saveUrl','updateUrl' and 'destroyUrl' properties for editable datagrid:

  • url: to retrieve user data from server.
  • saveUrl: to save a new user data.
  • updateUrl: to update an exists user data.
  • destroyUrl: to destroy an exists user data.

Step 3: Write server processing code

Save a new user(save_user.php):

Update an exists user(update_user.php):

Destroy an exists user(destroy_user.php):

Download the EasyUI example:

easyui-crud-demo.zip