jQuery EasyUI App - Creating CRUD Apps

Data collection and proper management of data are common necessities for network applications. CRUD allows us to generate page lists and edit database records. This tutorial will show you how to implement a CRUD DataGrid using the jQuery EasyUI framework.

jQuery EasyUI App - Creating CRUD Appssyntax

We will use the following plugin:

datagrid: Display list data to the user.

dialog: Create or edit a single user message.

form: used to submit form data.

messager: Display some operation information.

jQuery EasyUI App - Creating CRUD Appsexample

<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>