jQuery EasyUI App - Create a CRUD app

jQuery EasyUI App - Create a CRUD app

This section describes how to create a CRUD app.

CRUD refers, respectively, to the shortness of the initials of the words Create, Read Query, Update, and Delete when doing computational processing.

Data collection and proper management of data is a common necessity for network applications. C RUD allows us to generate a list of pages and edit database records. T his tutorial will show you how to implement a CRUD DataGrid using the jQuery EasyUI framework.

We'll use the following plug-in:

• Datagrid: Presents list data to the user.
• Dialog: Create or edit a single user message.
• Form: Used to submit form data.
• Messager: Show some action information.

Step 1: Prepare the database

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

Step 2: Create a DataGrid to display user information

Create DataGrid without javascript code.

<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 don't need to write any javascript code to display the list to the user, as shown in the following image:

DataGrid uses the 'url' property and is assigned a 'get_users.php' to retrieve data from the server.

get_users.php the code for the 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 a form dialog box

We use the same dialog box to create or edit users.

<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 box has been created and there is no javascript code: .

Step 4: Implement creating and editing users

When you create a user, open a dialog box and empty the form data.

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

When editing the user, open a dialog box and load the form data from the row selected by 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' stores the URL address that the form backled when the user data was saved.

Step 5: Save 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 the form is submitted, the 'onSubmit' function is called to verify the form field value. W hen the form field value is submitted successfully, close the dialog box and reload the datagrid data.

Step 6: Delete a user

Let's 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'll display a confirmation dialog box for the user to decide whether to actually remove the row data. W hen the removal of the data is successful, the 'reload' method is called to refresh the datagrid data.

Step 7: Run the code

Turn on MySQL and run the code in your browser.

Download the jQuery EasyUI instance

jeasyui-app-crud1.zip