使用easyUI创建一个CRUD的应用

crud成为普遍的应用去搜集数据和正常的管理.CRUD允许我们生成页面列表和编辑数据库数据,这个教程将告诉你如何实现CRUD DataGrid 使用easyUI框架.

我们将要使用以下插件:

• datagrid: 显示用户列表数据.
• dialog: 创建或者编辑单个用户信息.
• form: 使用form提交数据.
• messager: 显示一些操作信息.

第一步: 准备好数据库

我们将使用mysql存储用户信息,创建数据库和'users'表.

第二步:创建DataGrid显示用户信息

创建 DataGrid 没有javascript代码:

  
    
  
        
  
            
First Name
  
            
Last Name
  
            
Phone
  
            
Email
  
        
  
    
  
  
  
    New User  
    Edit User  
    Remove User  
  

我们不需要写任何的 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);  

第三步: 创建 form对话框

我们使用相同的对话框,创建或者编辑一个用户:

  
    
User Information
  
    
  
        
  
            First Name:  
              
        
  
        
  
            Last Name:  
              
        
  
        
  
            Phone:  
              
        
  
        
  
            Email:  
              
        
  
    
  
  
  
    Save  
    Cancel  
  

这个对话框已经创建也没有任何的javascript代码:

第四步:实现创建和编辑用户

当创建一个用户,我们打开一个对话框和清理form数据

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

当编辑一个用户,我们打开一个对话框加载form数据从 datagrid选择的行

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表单提交地址,当保存用户数据时

第五步: 保存用户数据

我们使用以下代码保存用户数据

function saveUser(){  
    $('#fm').form('submit',{  
        url: url,  
        onSubmit: function(){  
            return $(this).form('validate');  
        },  
        success: function(result){  
            var result = eval('('+result+')');  
            if (result.success){  
                $('#dlg').dialog('close');      // close the dialog  
                $('#dg').datagrid('reload');    // reload the user data  
            } else {  
                $.messager.show({  
                    title: 'Error',  
                    msg: result.msg  
                });  
            }  
        }  
    });  
} 

提交form之前,'onSubmit'函数将被调用,在那里我们可以验证form字段值当form字段值提交成功,关闭对话框和重新加载datagrid数据;

第6步:删除一个用户

我们使用以下代码,移除一个用户.

function removeUser(){  
    var row = $('#dg').datagrid('getSelected');  
    if (row){  
        $.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){  
            if (r){  
                $.post('remove_user.php',{id:row.id},function(result){  
                    if (result.success){  
                        $('#dg').datagrid('reload');    // reload the user data  
                    } else {  
                        $.messager.show({   // show error message  
                            title: 'Error',  
                            msg: result.msg  
                        });  
                    }  
                },'json');  
            }  
        });  
    }  
}  

移除一行之前,我们将显示一个确认confirm对话框让用户决定是否真的移除该行数据,当删除数据成功之后,调用'reload'方法刷新datagrid 数据

第7步: 运行代码

在浏览器运行你的代码和开启 MySQL .

所以,现在你知道在EasyUI的基础的CRUD ,按下下面的连接启动示例应用:

View Demo

下载EasyUI示例代码:

easyui_crud_demo.zip