jQuery EasyUI Applications - Creating a CRUD Application

Data collection and proper management of data is a common network application necessary. CRUD allows us to generate a list of pages and edit database records. This tutorial shows you how to use jQuery EasyUI framework to implement a CRUD DataGrid.

We will use the following plug-ins:

• datagrid: Display a list of the data to the user.
• dialog: Create or edit a single user information.
• form: form for submitting data.
• messager: shows some operational information.

Step 1: Prepare Database

We will use MySql database to store user information. Creating a database and 'users' table.

Step 2: Create a DataGrid to display user information

Created without javascript code DataGrid.

<Table id = "dg" title = "My Users" class = "easyui-datagrid" style = "width: 550px; height: 250px"
		url = "get_users.php"
		toolbar = "# toolbar"
		rownumbers = "true" fitColumns = "true" singleSelect = "true">
	<Thead>
		<Tr>
			<Th field = "firstname" width = "50"> First Name </ th>
			<Th field = "lastname" width = "50"> Last Name </ th>
			<Th field = "phone" width = "50"> Phone </ th>
			<Th field = "email" width = "50"> Email </ th>
		</ Tr>
	</ Thead>
</ Table>
<Div id = "toolbar">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()"> New User </a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()"> Edit User </a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()"> Remove User </a>
</ Div>

We do not need to write any javascript code that can be displayed to the user list, as shown below:

DataGrid using the 'url' property and assigned the 'get_users.php', used to retrieve data from the server.

Code get_users.php file

$ Rs = mysql_query ( 'select * from users');
$ Result = array ();
while ($ row = mysql_fetch_object ($ rs)) {
	array_push ($ result, $ row);
}

echo json_encode ($ result);

Step 3: Create Form dialog box

We use the same dialog box to create or edit a user.

<Div id = "dlg" class = "easyui-dialog" style = "width: 400px; height: 280px; padding: 10px 20px"
		closed = "true" buttons = "# dlg-buttons">
	<Div class = "ftitle"> User Information </ div>
	<Form id = "fm" method = "post">
		<Div class = "fitem">
			<Label> First Name: </ label>
			<Input name = "firstname" class = "easyui-validatebox" required = "true">
		</ Div>
		<Div class = "fitem">
			<Label> Last Name: </ label>
			<Input name = "lastname" class = "easyui-validatebox" required = "true">
		</ Div>
		<Div class = "fitem">
			<Label> Phone: </ label>
			<Input name = "phone">
		</ Div>
		<Div class = "fitem">
			<Label> Email: </ label>
			<Input name = "email" class = "easyui-validatebox" validType = "email">
		</ Div>
	</ Form>
</ Div>
<Div id = "dlg-buttons">
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()"> Save </a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"> Cancel </a>
</ Div>

This dialog has been created, nor any javascript code:

Step 4: Create and edit user achieve

When creating a user opens a dialog box and clear the form data.

function newUser () {
	$ ( '# Dlg') dialog ( 'open') dialog ( 'setTitle', 'New User')..;
	. $ ( '# Fm') form ( 'clear');
	url = 'save_user.php';
}

When editing a user, a dialog box opens and loads the form data from the row selected in datagrid.

var row = $ ( '# dg') datagrid ( 'getSelected').;
if (row) {
	$ ( '# Dlg') dialog ( 'open') dialog ( 'setTitle', 'Edit User')..;
	. $ ( '# Fm') form ( 'load', row);
	url = 'update_user.php id =?' + row.id;
}

'Url' return form is stored when the user data is saved URL address.

Step 5: Save the user data

We use the following code to save user data:

function saveUser () {
	$ ( '# Fm'). Form ( 'submit', {
		url: url,
		onSubmit: function () {
			return $ (this) .form ( 'validate');
		},
		success: function (result) {
			var result = eval ( '(' + result + ')');
			if (result.errorMsg) {
				$ .messager.show ({
					title: 'Error',
					msg: result.errorMsg
				});
			} Else {
				$ ( '# Dlg') dialog ( 'close');. // Close the dialog
				$ ( '# Dg') datagrid ( 'reload');. // Reload the user data
			}
		}
	});
}

Before submitting the form, 'onSubmit' function is called, the function is used to verify the form field values. When the form field values ​​submitted successfully, close the dialog and reload the datagrid data.

Step 6: Remove a user

We use the following code to remove a user:

function destroyUser () {
	var row = $ ( '# dg') datagrid ( 'getSelected').;
	if (row) {
		$ .messager.confirm ( 'Confirm', 'Are you sure you want to destroy this user?', Function (r) {
			if (r) {
				$ .post ( 'Destroy_user.php', {id: row.id}, function (result) {
					if (result.success) {
						$ ( '# Dg') datagrid ( 'reload');. // Reload the user data
					} Else {
						$ .messager.show ({// Show error message
							title: 'Error',
							msg: result.errorMsg
						});
					}
				}, 'Json');
			}
		});
	}
}

Before removing a row, we will display a confirmation dialog box that lets the user decide whether to actually remove the rows of data. After the data has been successfully removed, call the 'reload' method to refresh datagrid data.

Step 7: Run Code

Open MySQL, run the code in the browser.

Download jQuery EasyUI examples

jeasyui-app-crud1.zip