1. Home
  2. jQuery EasyUI application - create CRUD data grid

The best jQuery EasyUI application - create CRUD data grid Tutorial In 2024, In this tutorial you can learn Download jQuery EasyUI examples,

jQuery EasyUI application - create CRUD data grid

In the previous section, we use the dialog (dialog) components to create a CRUD application to create and edit user information. This tutorial will show you how to create a CRUD data grid (DataGrid). We will use editable data grid (DataGrid) plug-in to complete these actions CRUD operations.

Step 1: Define the HTML tag data grid (DataGrid) 

<Table id = "dg" title = "My Users" style = "width: 550px; height: 250px"
		toolbar = "# toolbar" idField = "id"
		rownumbers = "true" fitColumns = "true" singleSelect = "true">
	<Thead>
		<Tr>
			<Th field = "firstname" width = "50" editor = "{type: 'validatebox', options: {required: true}}"> First Name </ th>
			<Th field = "lastname" width = "50" editor = "{type: 'validatebox', options: {required: true}}"> Last Name </ th>
			<Th field = "phone" width = "50" editor = "text"> Phone </ th>
			<Th field = "email" width = "50" editor = "{type: 'validatebox', options: {validType: 'email'}}"> Email </ th>
		</ Tr>
	</ Thead>
</ Table>
<Div id = "toolbar">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')"> New </ a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')"> Destroy </ a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')"> Save </ a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')"> Cancel </ a>
</ Div>

Step 2: Use editable data grid (DataGrid) 

$ ( '# Dg'). Edatagrid ({
	url: 'get_users.php',
	saveUrl: 'save_user.php',
	updateUrl: 'update_user.php',
	destroyUrl: 'destroy_user.php'
});

We should offer 'url', 'saveUrl', 'updateUrl' and 'destroyUrl' attribute to edit the data grid (DataGrid):

  • url: retrieve user data from the server.
  • saveUrl: save a new user data.
  • updateUrl: update an existing user data.
  • destroyUrl: To delete an existing user data.

Step 3: Write server processing code

Save a new user (save_user.php): 

$ Firstname = $ _REQUEST [ 'firstname'];
$ Lastname = $ _REQUEST [ 'lastname'];
$ Phone = $ _REQUEST [ 'phone'];
$ Email = $ _REQUEST [ 'email'];

include 'conn.php';

$ Sql ​​= "insert into users (firstname, lastname, phone, email) values ​​( '$ firstname', '$ lastname', '$ phone', '$ email')";
@mysql_query ($ sql);
echo json_encode (array (
	'Id' => mysql_insert_id (),
	'Firstname' => $ firstname,
	'Lastname' => $ lastname,
	'Phone' => $ phone,
	'Email' => $ email
));

Update a user already exists (update_user.php): 

$ Id = intval ($ _ REQUEST [ 'id']);
$ Firstname = $ _REQUEST [ 'firstname'];
$ Lastname = $ _REQUEST [ 'lastname'];
$ Phone = $ _REQUEST [ 'phone'];
$ Email = $ _REQUEST [ 'email'];

include 'conn.php';

$ Sql ​​= "update users set firstname = '$ firstname', lastname = '$ lastname', phone = '$ phone', email = '$ email' where id = $ id";
@mysql_query ($ sql);
echo json_encode (array (
	'Id' => $ id,
	'Firstname' => $ firstname,
	'Lastname' => $ lastname,
	'Phone' => $ phone,
	'Email' => $ email
));

To delete a user already exists (destroy_user.php): 

$ Id = intval ($ _ REQUEST [ 'id']);

include 'conn.php';

$ Sql ​​= "delete from users where id = $ id";
@mysql_query ($ sql);
echo json_encode (array ( 'success' => true));

Download jQuery EasyUI examples

jeasyui-app-crud2.zip

Hot Tools

Other Tools

Online Tutorial

Website Navigation

jQuery EasyUI application - create CRUD data grid
10/30