Build CRUD Application with jQuery EasyUI

http://www.jeasyui.com/tutorial/app/crud.php

It has become a common necessily for web application to collect data and manage it properly. CRUD allows us to generate pages to list and edit database records. This tutorial will show you how to implement a CRUD DataGrid using jQuery EasyUI framework.

We will use following plugins:

• datagrid: show the user list data.
• dialog: create or edit a single user information.
• form: used to submit form data.
• messager: to show some operation messages.

Step 1: Prepare database

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

Step 2: Create DataGrid to display user information

Create the DataGrid with no javascript code.

1. <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
2. url="get_users.php"
3. toolbar="#toolbar"
4. rownumbers="true" fitColumns="true" singleSelect="true">
5. <thead>
6. <tr>
7. <th field="firstname" width="50">First Name</th>
8. <th field="lastname" width="50">Last Name</th>
9. <th field="phone" width="50">Phone</th>
10. <th field="email" width="50">Email</th>
11. </tr>
12. </thead>
13. </table>
14. <div id="toolbar">
15. <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
16. <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
17. <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
18. </div>

We don't need to write any javascript code and we can show the user list as following image:

The DataGrid use the 'url' property that is assigned to 'get_users.php' to retrieve data from server.

Code of get_users.php file

1. $rs = mysql_query('select * from users');
2. $result = array();
3. while($row = mysql_fetch_object($rs)){
4. array_push($result, $row);
5. }
6. echo json_encode($result);

Step 3: Create form dialog

To create or edit a user, we use the same dialog.

1. <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
2. closed="true" buttons="#dlg-buttons">
3. <div class="ftitle">User Information</div>
4. <form id="fm" method="post" novalidate>
5. <div class="fitem">
6. <label>First Name:</label>
7. <input name="firstname" class="easyui-textbox" required="true">
8. </div>
9. <div class="fitem">
10. <label>Last Name:</label>
11. <input name="lastname" class="easyui-textbox" required="true">
12. </div>
13. <div class="fitem">
14. <label>Phone:</label>
15. <input name="phone" class="easyui-textbox">
16. </div>
17. <div class="fitem">
18. <label>Email:</label>
19. <input name="email" class="easyui-textbox" validType="email">
20. </div>
21. </form>
22. </div>
23. <div id="dlg-buttons">
24. <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
25. <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
26. </div>

The dialog is created with no javascript code also.

Step 4: Implement creating and editing a user

When create a user, we open the dialog and clear form data.

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

When edit a user, we open the dialog and load form data from the selected datagrid row.

1. var row = $('#dg').datagrid('getSelected');
2. if (row){
3. $('#dlg').dialog('open').dialog('setTitle','Edit User');
4. $('#fm').form('load',row);
5. url = 'update_user.php?id='+row.id;
6. }

The 'url' stores the URL address where the form will post to when save the user data.

Step 5: Save the user data

To save the user data we use the following code:

1. function saveUser(){
2. $('#fm').form('submit',{
3. url: url,
4. onSubmit: function(){
5. return $(this).form('validate');
6. },
7. success: function(result){
8. var result = eval('('+result+')');
9. if (result.errorMsg){
10. $.messager.show({
11. title: 'Error',
12. msg: result.errorMsg
13. });
14. } else {
15. $('#dlg').dialog('close'); // close the dialog
16. $('#dg').datagrid('reload'); // reload the user data
17. }
18. }
19. });
20. }

Before submit the form, the 'onSubmit' function will be called, in which we can validate the form field value. When the form field values are submited successfully, close the dialog and reload the datagrid data.

Step 6: Remove a user

To remove a user, we use the following code:

1. function destroyUser(){
2. var row = $('#dg').datagrid('getSelected');
3. if (row){
4. $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
5. if (r){
6. $.post('destroy_user.php',{id:row.id},function(result){
7. if (result.success){
8. $('#dg').datagrid('reload'); // reload the user data
9. } else {
10. $.messager.show({ // show error message
11. title: 'Error',
12. msg: result.errorMsg
13. });
14. }
15. },'json');
16. }
17. });
18. }
19. }

Before remove a row, we will display a confirm dialog to let user to determine whether to really remove the row data. When remove data successfully, call 'reload' method to refresh the datagrid data.

Step 7: Run the Code

Run the code in your browser with MySQL started.

So, you now know the basics of CRUD in jQuery EasyUI framework. Press below link to start the demo application.

View Demo

Download the EasyUI example:

easyui-crud-demo.zip