JQuery Easyui using the tutorial to create an expanded line detail edit form for a crud application

When you switch the DataGrid view to "DetailView", the user can expand a row to display any details below the row. This feature allows the user to provide the appropriate layout for the edit form placed in the row details panel. In this tutorial, we use the DataGrid component to reduce the space occupied by editing a form.

View Demo

Step 1: Create a DataGrid in HTML markup

<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= ">last 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" 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 a detailed view for the 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 use the detailed view of the DataGrid, the "Datagrid-detailview.js" file is introduced to the HTML page header.

We use the "detailformatter" function to generate the row details content. In this case, we return an empty one for placing the edit form. When the user clicks the Line expand button ("+"), the "Onexpandrow" event will be triggered, and we can load the edit form via Ajax. Use the Getrowdetail method to get the details container for the row, so we can find the details panel for that row. Create a panel in the row details and load the returned edit form from "show_form.php".

Step 3: Create an Edit form

Loads the edit form from the server.

show_form.php

<form method= "post" > <table  class = "dv-table" style= "width:100%;background:#fafafa;padding:5px;margin-top:5px;" > <tr> <td>First Name</td> <td><input name= "firstname" class = "easyui-validatebox" required= "true" ></input></td> <td>Last Name</td> <td><input name= "lastname" class = "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= "icon-cancel" plain= "true" onclick= "cancelItem(<?php echo $_REQUEST[‘index‘];?>)" >Cancel</a> </div> </form> Step 4: Save or cancel edits

Call the "SaveItem" function to save the 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 }); } }); }

Determine which URL to publish first, then look up the form object and invoke the "submit" method to submit the form data. When the data is saved successfully, the row data is closed 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 operation is canceled, if the row is a new row and has not been saved, delete the row directly, or the row will be closed.

Download Easyui Example: Easyui-crud-demo.zip

>>jquery Easyui Trial Version <<

friends who are interested can Click to see more tutorials on jQuery Easyui !

JQuery Easyui using the tutorial to create an expanded line detail edit form for a crud application