jQuery EasyUI Application - Creating a CRUD Application

Collecting and managing data properly is a common necessity for web applications. CRUD allows us to generate list pages and edit database records. This tutorial will show you how to implement a CRUD DataGrid using the jQuery EasyUI framework.

We will use the following plugins:

• datagrid: Displays list data to the user.
• dialog: Creates or edits a single user's information.
• form: Used for submitting form data.
• messager: Displays some operation information.

Step 1: Prepare the Database

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

Step 2: Create a DataGrid to Display User Information

Create a DataGrid without any 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 below:

The DataGrid uses the 'url' attribute, set to 'get_users.php', to retrieve data from the server.

Code for the 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 a Form Dialog

We use the same dialog 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 without any JavaScript code.

Step 4: Implement Creating and Editing Users

When creating a user, open a dialog 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, open a dialog and load the form data from the selected row in the 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;
}

The 'url' stores the URL address that the form posts to when saving user data.

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 submitting the form, the 'onSubmit' function is called to validate the form field values. When the form field values are successfully submitted, the dialog is closed and the datagrid data is reloaded.

Step 6: Delete 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 display a confirmation dialog to let the user decide whether to remove the row data or not. After the data is successfully removed, the 'reload' method is called to refresh the datagrid data.

Step 7: Run the Code

Start MySQL and run the code in the browser.

Download jQuery EasyUI Example

jeasyui-app-crud1.zip