One.
Two, source code.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>build CRUD DataGrid with jQuery easyui-jquery Easyui demo</title>
<link rel= "stylesheet" type= "Text/css" href= "Http://www.jeasyui.com/easyui/themes/default/easyui.css" >
<link rel= "stylesheet" type= "Text/css" href= "Http://www.jeasyui.com/easyui/themes/icon.css" >
<link rel= "stylesheet" type= "Text/css" href= "Http://www.jeasyui.com/easyui/demo/demo.css" >
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.6.min.js" ></script>
<script type= "Text/javascript" src= "Http://www.jeasyui.com/easyui/jquery.easyui.min.js" ></script>
<script type= "Text/javascript" src= "Http://www.jeasyui.com/easyui/jquery.edatagrid.js" ></script>
<body>
<p>double Click the row to begin editing.</p>
<table id= "DG" title= "My Users" style= "width:700px;height:250px"
Toolbar= "#toolbar" pagination= "true" idfield= "id"
Rownumbers= "true" fitcolumns= "true" singleselect= "true" >
<thead>
<tr>
<th field= "FirstName" width= "editor=" {type: ' Validatebox ', Options:{required:true}} ">first name</th>
<th field= "LastName" Width= "editor=" {type: ' Validatebox ', Options:{required:true}} ">last name</th>
<th field= "Phone" width= "editor=" text ">Phone</th>
<th field= "Email" width= "editor=" {type: ' Validatebox ', options:{validtype: ' Email '} ' >Email</th>
</tr>
</thead>
</table>
<div id= "Toolbar" >
<a href= "javascript:void (0)" class= "Easyui-linkbutton" iconcls= "Icon-add" plain= "true" onclick= "javascript:$ (' # DG '). Edatagrid (' AddRow ') ">New</a>
<a href= "javascript:void (0)" class= "Easyui-linkbutton" iconcls= "Icon-remove" plain= "true" onclick= "javascript:$ ( ' #dg '). Edatagrid (' Destroyrow ') ">Destroy</a>
<a href= "javascript:void (0)" class= "Easyui-linkbutton" iconcls= "Icon-save" plain= "true" onclick= "javascript:$ (' # DG '). Edatagrid (' Saverow ') ">Save</a>
<a href= "javascript:void (0)" class= "Easyui-linkbutton" iconcls= "Icon-undo" plain= "true" onclick= "javascript:$ (' # DG '). Edatagrid (' Cancelrow ') ">Cancel</a>
</div>
<script type= "Text/javascript" >
$ (function () {
$ (' #dg '). Edatagrid ({
URL: ' http://www.jeasyui.com/demo/main/get_users.php ',
Saveurl: ' http://www.jeasyui.com/demo/main/save_user.php ',
UpdateUrl: ' http://www.jeasyui.com/demo/main/update_user.php ',
Destroyurl: ' http://www.jeasyui.com/demo/main/destroy_user.php '
});
});
</script>
</body>
Application (curd)--easyui