jQuery EasyUI教程之datagrid应用

一、利用jQuery EasyUI的DataGrid创建CRUD应用
 
    对网页应用程序来说，正确采集和管理数据通常很有必要，DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录。本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 。
我们会用到如下插件:
· datagrid: 列表显示数据。
· dialog: 增加或编辑单个用户信息。
· form: 用来提交表单数据。
· messager: 用来显示操作信息。

第一步：准备数据库

使用MySql数据库来保存用户信息，并创建数据库和“users”表。
 

第二步：创建DataGrid数据表格来显示用户信息

不需要编写任何javascript代码创建DataGrid数据表格。

< 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="50">First Name</th>  
             <th field="lastname" width="50">Last Name</th>  
             <th field="phone" width="50">Phone</th>  
             <th field="email" width="50">Email</th>  
         </tr>  
     </thead>  
</ table>  
< div id="toolbar">  
     <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a>  
     <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>  
     <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove User</a>  
</ div>  

如下图所示，我们不需要写任何一行javascript代码:

DataGrid使用“url”属性来指定“get_users.php”，用来从服务器端接收数据。

get_users.php代码文件：

$rs = mysql_query( 'select * from users');  
$result = array();  
while($row = mysql_fetch_object($rs)){  
    array_push($result, $row);  
}  
echo json_encode($result);  

第三步：创建表单对话框

增加或者编辑用户信息，我们使用同一对话框。

< 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 class="fitem">  
             <label>First Name:</label>  
             <input name="firstname" class="easyui-validatebox" required="true">  
         </div>  
         <div class="fitem">  
             <label>Last Name:</label>  
             <input name="lastname" class="easyui-validatebox" required="true">  
         </div>  
         <div class="fitem">  
             <label>Phone:</label>  
             <input name="phone">  
         </div>  
         <div class="fitem">  
             <label>Email:</label>  
             <input name="email" class="easyui-validatebox" validType="email">  
         </div>  
     </form>  
</ div>  
< div id="dlg-buttons">  
     <a href="#" class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveUser()">Save</a>  
     <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')">Cancel</a>  
</ div>  

 

对话框的创建也不需要编写javascript代码。

 

第四步：实现增加和编辑用户功能

增加用户信息时，打开对话框，清除表单数据。

function newUser(){  
    $( '#dlg').dialog('open').dialog('setTitle','New User');  
    $( '#fm').form('clear');  
    url =  'save_user.php';  
}  

 

编辑用户信息时，打开对话框，将选择的数据表格行数据装入表单。

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

 
“url”保存URL地址，当保存用户数据时，表单用它来提交（post）数据到服务器。
 
第五步：保存用户数据
 

使用如下代码来保存用户数据：

function saveUser(){  
    $( '#fm').form('submit',{  
        url: url,  
        onSubmit:  function(){  
             return $(this).form('validate');  
        },  
        success:  function(result){  
             var result = 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  
            }  
        }  
    });  
}  

 
提交表单前，“onSubmit”函数被调用，此时可校验表单字段值。当表单字段值提交成功，关闭对话框和刷新数据表格数据。
 
第六步：删除用户
 

用如下代码来删除用户：

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'); // 刷新用户数据  
                    }  else {  
                        $.messager.show({  // 显示错误信息  
                            title:  'Error',  
                            msg: result.errorMsg  
                        });  
                    }  
                }, 'json');  
            }  
        });  
    }  
}  

 

删除一行数据时，会弹出一个confirm对话框来让我们选择确定是否真的删除数据行。当删除数据成功，调用“reload”方法刷新datagrid数据。

二、DataGrid的扩展应用

    上一份教程我们创建的一个CRUD应用是使用对话框组件来增加或编辑用户信息。本教程将教你如何创建一个CRUD 数据表格（datagrid）. 为了让这些CRUD功能正常工作，我们会用到edatagrid.js插件。

第一步：在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">