jQuery EasyUI使用教程之构建CRUD DataGrid

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

Step 1：在HTML标记中定义DataGrid

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

< 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

1 2 3 4 5 6

$( '#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：删除一个已存在的用户的数据。

Step 3：编写服务器处理代码

保存一个新用户（save_user.php）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$firstname =  $_REQUEST [ 'firstname' ]; $lastname =  $_REQUEST [ 'lastname' ]; $phone =  $_REQUEST [ 'phone' ]; $email =  $_REQUEST [ 'email' ];   include 'conn.php' ;   $sql =  "insert into users(firstname,lastname,phone,email) values('$firstname','$lastname','$phone','$email')" ; @mysql_query( $sql ); echo json_encode( array ( 'id' => mysql_insert_id(), 'firstname' =>  $firstname , 'lastname' =>  $lastname , 'phone' =>  $phone , 'email' =>  $email ));

更新一个已存在的用户（update_user.php）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$id =  intval ( $_REQUEST [ 'id' ]); $firstname =  $_REQUEST [ 'firstname' ]; $lastname =  $_REQUEST [ 'lastname' ]; $phone =  $_REQUEST [ 'phone' ]; $email =  $_REQUEST [ 'email' ];   include 'conn.php' ;   $sql = "update users set firstname='$firstname',lastname='$lastname',phone='$phone',email='$email' where id=$id" ; @mysql_query( $sql ); echo json_encode( array ( 'id' =>  $id , 'firstname' =>  $firstname , 'lastname' =>  $lastname , 'phone' =>  $phone , 'email' =>  $email ));

删除一个已存在的用户（destroy_user.php）：

1 2 3 4 5 6 7

$id =  intval ( $_REQUEST [ 'id' ]);   include 'conn.php' ;   $sql =  "delete from users where id=$id" ; @mysql_query( $sql ); echo json_encode( array ( 'success' =>true));

下载EasyUI示例：easyui-crud-demo.zip

>>jQuery EasyUI试用版下载地址<<