Easily learn how to create a CRUD application by using the jQuery plug-in EasyUIEasyUI _ jquery

This article helps you easily learn the jQuery plug-in EasyUI and use EasyUI to create a CRUD application. If you are interested, you can refer to data collection and proper data management as a common necessity for network applications. CRUD allows us to generate a page list and edit database records. This tutorial will show you how to use the jQuery EasyUI framework to implement a CRUD DataGrid.
We will use the following plug-in:
Datagrid:Displays list data to users.
Dialog:Creates or edits a single user information.
Form:Used to submit form data.
Messager:Displays some operation information.

1. EasyUI create a CRUD Application
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 a DataGrid without javascript code.

 
 
 
  
  
 
   
 
    
First Name
 
    
Last Name
 
    
Phone
 
    
Email
 
   
 
  
 
 
 New User Edit User Remove User

We can display the list to users without writing any javascript code, as shown in:

The DataGrid uses the 'url' attribute and assigns it 'get _ users. php' to retrieve data from the server.
Code of 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 box

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

 
User Information
 
 Save Cancel

This dialog box has been created without any javascript code.

Step 4: Create and edit users

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

'Url' stores the url address returned by the form when user data is saved.
Step 5: Save User Data

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 a form, the 'onsubmit 'function is called to verify the form field value. When the form field value is submitted successfully, close the dialog box and reload the datagrid data.
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 will display a confirmation dialog box asking the user to decide whether to actually remove the row of data. After the data is successfully removed, call the 'reload' method to refresh the datagrid data.
Step 7: run the code

Start MySQL and run the code in the browser.

Ii. EasyUI create a CRUD application for expanding the line detail editing form

When you switch the data grid view to 'detailview', you can expand a row to display the details of some rows under the row. This feature allows you to provide some layout options to prevent form editing in the detail line panel ). In this tutorial, we use the data grid component to reduce the space occupied by form editing.

Step 1: define the data grid (DataGrid) in the HTML Tag)

 
 
 
  
  
 
   
 
    
First Name
 
    
Last Name
 
    
Phone
 
    
Email
 
   
 
  
 
 
 New Destroy

Step 2: Apply the Detail View to the Data Grid

$('#dg').datagrid({ view: detailview, detailFormatter:function(index,row){ return '
'; }, onExpandRow: function(index,row){ var ddv = $(this).datagrid('getRowDetail',index).find('p.ddv'); ddv.panel({  border:false,  cache:true,  href:'show_form.php?index='+index,  onLoad:function(){  $('#dg').datagrid('fixDetailRowHeight',index);  $('#dg').datagrid('selectRow',index);  $('#dg').datagrid('getRowDetail',index).find('form').form('load',row);  } }); $('#dg').datagrid('fixDetailRowHeight',index); }});

To apply the detailed view to the data grid, introduce the 'datagrid-detailview. js' file in the header of the html page.
We use the 'detailformatter 'function to generate detailed details of a line. In this case, we return an empty

. When you click the expand row button ('+'), The 'onexpandrow' event will be triggered, and we will load and edit the form (form) through ajax ). Call the 'getrowdetail 'method to obtain the line details container, so we can find the line details panel ). Create a panel in the row details and load the editing form (form) returned from 'show _ form. php ).
Step 3: Create and edit a Form)

Form editing is loaded from the server.
Show_form.php

Step 4: Save or cancel editing

Call the 'savitem' function to save a user or call the 'cancelitem' function to cancel editing.

function saveItem(index){ var row = $('#dg').datagrid('getRows')[index]; var url = row.isNewRecord ? 'save_user.php' : 'update_user.php?id='+row.id; $('#dg').datagrid('getRowDetail',index).find('form').form('submit',{ url: url, onSubmit: function(){  return $(this).form('validate'); }, success: function(data){  data = eval('('+data+')');  data.isNewRecord = false;  $('#dg').datagrid('collapseRow',index);  $('#dg').datagrid('updateRow',{  index: index,  row: data  }); } });}

Determine which URL to return, search for the form object, and call the 'submit 'method to submit form data. When the data is successfully saved, fold and update the row data.

function cancelItem(index){ var row = $('#dg').datagrid('getRows')[index]; if (row.isNewRecord){ $('#dg').datagrid('deleteRow',index); } else { $('#dg').datagrid('collapseRow',index); }}

When you cancel the edit operation, if the row is a new row and has not been saved, delete the row directly. Otherwise, fold the row.

The above are seven steps for EasyUI to create a CRUD application. I hope it will help you learn more.