Easy Learning jquery Plugin Easyui easyui create crud Application _jquery

Data collection and proper management of data is a common necessity for network applications. CRUD allows us to generate a list of 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: displaying list data to users.
dialog: Create or edit a single user information.
form: for submitting form data.
Messager: displays some operational information.

First, Easyui create CRUD applications
Step 1: Prepare the database

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

Step 2: Create a DataGrid to display user information

Create a 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= "a" >first "name</th> <th field=" LastName "Width=" >las T name</th> <th field= "Phone" width= ">Phone</th> <th field=" email "width=" >email</th > </tr> </thead> </table> <div id= "Toolbar" > <a href= "#" class= "Easyui-linkbutton" Iconcl s= "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>; 

We don't need to write any JavaScript code, we can show the list to the user, as shown in the following figure:

The DataGrid uses the ' URL ' attribute and assigns ' get_users.php ' to retrieve data from the server.
Code for get_users.php files

$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 CLA ss= "Fitem" > <label>first name:</label> <input name= "FirstName" class= "Easyui-validatebox" required = "true" > </div> <div class= "Fitem" > <label>last name:</label> <input name= "LastName" CLA ss= "Easyui-validatebox" required= "true" > </div> <div class= "Fitem" > <label>phone:</label > <input name= "Phone" > </div> <div class= "Fitem" > <label>Email:</label> <input NA Me= "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, and there is no JavaScript code.

Step 4: Implement Create and edit users

When you create a user, you 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;
}

The ' URL ' stores the URL address for the form to return when the user's data is 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 = 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
 }< c17/>}}
 );

Before submitting the form, the ' onSubmit ' function is invoked to validate the form field values. 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.err Ormsg
 });
 }
 , ' json ')
;}}

Before removing a row, we will display a confirmation dialog box to let the user decide whether to remove the row data. When the data is removed successfully, the ' reload ' method is invoked to refresh the DataGrid data.
Step 7: Run the Code

Open MySQL and run the code in the browser.

Second, Easyui create an expanded line detail edit the crud application of a form

When you switch the data grid view (DataGrid view) to ' DetailView ', the user can expand one line to show the details of some rows below the row. This feature allows you to provide some appropriate layouts (layout) To prevent editing forms (form) in the Detail Row panel (panel). In this tutorial, we use the data grid (DataGrid) component to reduce the space occupied by the Edit form (form).

Step 1: Define the data grid (DataGrid) in the HTML tab

<table id= "DG" title= "My Users" style= "width:550px;height:250px" url= "get_users.php" toolbar= "
 #toolbar"
 fitcolumns= "true" singleselect= "true" >
 <thead>
 <tr>
  <th field= "FirstName" Width= ">first" name</th>
  <th field= "LastName" Width= "a" >last name</th>
  Field = "Phone" width= ">Phone</th>
  <th field=" email "width=" >Email</th>
 </tr>
 </thead>
</table>
<div id= "Toolbar" >
 <a href= "#" class= " Easyui-linkbutton "iconcls=" Icon-add "plain=" true "onclick=" NewItem () ">New</a>
 <a href=" # "class=" Easyui-linkbutton "iconcls=" Icon-remove "plain=" true "onclick=" Destroyitem () ">Destroy</a>
</div >

Step 2: Apply the detail view for the data grid (DataGrid)

$ (' #dg '). DataGrid ({
 View:detailview,
 detailformatter:function (index,row) {return
 ' <div class= ' DDV "></div>"
 },
 onexpandrow:function (index,row) {
 var DDV = $ (this). DataGrid (' Getrowdetail ', Index). Find (' DIV.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 a detail view to the data grid (DataGrid), introduce the ' datagrid-detailview.js ' file to the head of the HTML page.
We use the ' detailformatter ' function to generate line details. In this case, we return an empty <div> that is used to place the edit form (form). When the user clicks on the Line expansion button (' + '), the ' Onexpandrow ' event will be triggered and we will load the edit form (form) via Ajax. Call the ' Getrowdetail ' method to get the row detail container, so we can find the Row Detail Panel (panel). Create Panels (panel) in the row details to load the Edit form (form) returned from ' show_form.php '.
Step 3: Create an Edit form (form)

The Edit form (form) is loaded from the server.
show_form.php

<form method= "POST" > <table class= "dv-table" style= "Width:100%;background: #fafafa;p adding:5px;margin-top : 5px; " > <tr> <td>first name</td> <td><input name= "FirstName" class= "Easyui-validatebox" Requi Red= "true" ></input></td> <td>last name</td> <td><input name= "LastName"
  Easyui-validatebox "required=" true "></input></td> </tr> <tr> <td>Phone</td> <td><input name= "Phone" ></input></td> <td>Email</td> <td><input name= "Email" class= "Easyui-validatebox" validtype= "email" ></input></td> </tr> </table> < Div style= "padding:5px 0;text-align:right;padding-right:30px" > <a href= "#" class= "Easyui-linkbutton" iconCls= " Icon-save "plain=" true "onclick=" SaveItem (<?php echo $_request[' index ');? >) ">Save</a> <a href=" # "class=" Easyui-linkbutton "iconcls=" plAin= "true" onclick= "Cancelitem" (<?php echo $_request[' index ');?
 >) ">Cancel</a> </div> </form>

Step 4: Save or cancel the edit

Call the ' SaveItem ' function to save a user or call the ' Cancelitem ' function to cancel the edit.

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
  });
 }
 }

Decide which URL to return, find the Form object, and invoke the ' submit ' method to submit the form data. When the data is saved successfully, the row data is collapsed and updated.

function Cancelitem (index) {
 var row = $ (' #dg '). DataGrid (' GetRows ') [index];
 if (Row.isnewrecord) {
 $ (' #dg '). DataGrid (' DeleteRow ', index);
 } else {
 $ (' #dg '). DataGrid (' Collapserow ', index);
 }

When the edit action is canceled, if the row is a new row and has not been saved, delete the row directly or collapse the row.

The above is about Easyui to create a crud application of the seven major steps, to share with you, hope to help you learn.