使用jQuery EasyUI构建CRUD应用程序（一）

CRUD应用程序已经成为一个常见的收集数据并且正确管理数据的Web应用程序。CRUD允许我们生成页面列表并且可以编辑数据库记录。本文主要为大家展示如何利用jQuery EasyUI框架来实现CRUD应用程序。

我们将使用以下的插件：

• 数据网格（datagrid）：显示用户列表数据

• 对话框（dialog）：创建或编辑一个用户的信息

• form：用于提交表单数据

• messager：显示一些操作信息

步骤1：准备数据库

我们将使用MySQL数据库来存储用户信息，创建数据库和"用户"表。

步骤2：创建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" onclick = "newUser()" >New User</ a >

< a href = "#" class = "easyui-linkbutton" iconCls = "icon-edit" plain = "true" onclick = "editUser()" >Edit User</ a >

 < a href = "#" class = "easyui-linkbutton" iconCls = "icon-remove" plain = "true" onclick = "destroyUser()" >Remove User</ a >

 </ div >

我们不需要编写任何JavaScript代码，就可以显示用户列表如下图：

DataGrid从服务器检索数据中使用'url'属性分配给"get_users.php"。

get_users.php文件的代码：

1 $rs = mysql_query('select * from users');

2 $result = array();

3 while($row = mysql_fetch_object($rs)){

4 array_push($result, $row);

5 }

6

7 echo json_encode($result);

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