jQuery EasyUI使用教程之构建CRUD DataGrid（上）

在本教程中，我们将为大家展示如何创建一个CRUD DataGrid。在这期间将使用到可编辑的datagrid插件来同这些crud操作一起工作。

Step 1：在HTML标记中定义DataGrid

< table id = "dg" title = "My Users" style = "width:550px;height:250px"
toolbar = "#toolbar" idField = "id"
rownumbers = "true" fitColumns = "true" singleSelect = "true" >
< thead >
< tr >
< th field = "firstname" width = "50" editor = "{type:'validatebox',options:{required:true}}" >First Name</ th >
< th field = "lastname" width = "50" editor = "{type:'validatebox',options:{required:true}}" >Last Name</ th >
< th field = "phone" width = "50" editor = "text" >Phone</ th >
< th field = "email" width = "50" editor = "{type:'validatebox',options:{validType:'email'}}" >Email</ th >
</ tr >
</ thead >
</ table >
< div id = "toolbar" >
< a href = "#" class = "easyui-linkbutton" iconCls = "icon-add" plain = "true" onclick = "javascript:$('#dg').edatagrid('addRow')" >New</ a >
< a href = "#" class = "easyui-linkbutton" iconCls = "icon-remove" plain = "true" onclick = "javascript:$('#dg').edatagrid('destroyRow')" >Destroy</ a >
< a href = "#" class = "easyui-linkbutton" iconCls = "icon-save" plain = "true" onclick = "javascript:$('#dg').edatagrid('saveRow')" >Save</ a >
< a href = "#" class = "easyui-linkbutton" iconCls = "icon-undo" plain = "true" onclick = "javascript:$('#dg').edatagrid('cancelRow')" >Cancel</ a >
</ div >

Step 2：制作一个可编辑的DataGrid

$( '#dg' ).edatagrid({
url:  'get_users.php' ,
saveUrl:  'save_user.php' ,
updateUrl:  'update_user.php' ,
destroyUrl:  'destroy_user.php'
});

我们应该为可编辑的datagrid提供"url"、"saveUrl"、"updateUrl"和"destroyUrl"属性：

• url：从服务器获取用户数据。

• saveUrl：保存一个新用户的数据。

• updateUrl：更新一个已存在的用户的数据。

• destroyUrl：删除一个已存在的用户的数据。

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的文章！