使用jQuery EasyUI構(gòu)建CRUD應(yīng)用程序

---

Kendo UI for jQuery——?jiǎng)?chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫！查看詳情>>>

 CRUD應(yīng)用程序已經(jīng)成為一個(gè)常見的收集數(shù)據(jù)并且正確管理數(shù)據(jù)的Web應(yīng)用程序。CRUD允許我們生成頁面列表并且可以編輯數(shù)據(jù)庫記錄。本文主要為大家展示如何利用jQuery EasyUI框架來實(shí)現(xiàn)CRUD應(yīng)用程序。

我們將使用以下的插件：

• 數(shù)據(jù)網(wǎng)格（datagrid）：顯示用戶列表數(shù)據(jù)
• 對(duì)話框（dialog）：創(chuàng)建或編輯一個(gè)用戶的信息
• form：用于提交表單數(shù)據(jù)
• messager：顯示一些操作信息

步驟1：準(zhǔn)備數(shù)據(jù)庫

我們將使用MySQL數(shù)據(jù)庫來存儲(chǔ)用戶信息，創(chuàng)建數(shù)據(jù)庫和"用戶"表。

步驟2：創(chuàng)建DataGrid顯示用戶信息

創(chuàng)建沒有JavaScript代碼的DataGrid。

 

	
	

		
		

			
			

				First Name
			

			

				Last Name
			

			

				Phone
			

			

				Email
			

		

	




	New User Edit User Remove User 

我們不需要編寫任何JavaScript代碼，就可以顯示用戶列表如下圖：

DataGrid從服務(wù)器檢索數(shù)據(jù)中使用'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);

第3步：創(chuàng)建表格對(duì)話框

創(chuàng)建或編輯一個(gè)用戶，我們使用相同的對(duì)話框。

1

	3
	

		User Information
	
45
	

		6First Name:78
	
9
	

		10Last Name:1112
	
13
	

		14Phone:1516
	
17
	

		18Email:1920
	
2122

23

	24 Save 25 Cancel 26

也沒有用javascript代碼創(chuàng)建的對(duì)話框。

步驟4：執(zhí)行創(chuàng)建和編輯的用戶

當(dāng)創(chuàng)建一個(gè)用戶，我們打開對(duì)話框，清除表單數(shù)據(jù)。

1 function newUser(){

2 $('#dlg').dialog('open').dialog('setTitle','New User');

3 $('#fm').form('clear');

4 url = 'save_user.php';

5 }

編輯用戶的時(shí)候，我們打開對(duì)話框，從選定的datagrid加載表單數(shù)據(jù)行。

1 var row = $('#dg').datagrid('getSelected');

2 if (row){

3 $('#dlg').dialog('open').dialog('setTitle','Edit User');

4 $('#fm').form('load',row);

5 url = 'update_user.php?id='+row.id;

6 }

在"URL"存儲(chǔ)的URL地址，其中的form 將發(fā)布的時(shí)候保存用戶數(shù)據(jù)。

步驟5：保存用戶數(shù)據(jù)

保存用戶數(shù)據(jù),我們使用下面的代碼：

1 function saveUser(){

2 $('#fm').form('submit',{

3 url: url,

4 onSubmit: function(){

5 return $(this).form('validate');

6 },

7 success: function(result){

8 var result = ;

9 if (result.errorMsg){

10 $.messager.show({

11 title: 'Error',

12 msg: result.errorMsg

13 });

14 } else {

15 $('#dlg').dialog('close'); // close the dialog

16 $('#dg').datagrid('reload'); // reload the user data

17 }

18 }

19 });

20 }

 在提交表單時(shí)，"onsubmit"的函數(shù)將被調(diào)用，在其中我們可以驗(yàn)證表單字段的值。當(dāng)窗體字段值成功時(shí)，關(guān)閉對(duì)話框并重新加載數(shù)據(jù)網(wǎng)格的數(shù)據(jù)。

步驟6：刪除用戶

要?jiǎng)h除一個(gè)用戶，我們使用下面的代碼：

1 function destroyUser(){

2 var row = $('#dg').datagrid('getSelected');

3 if (row){

4 $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){

5 if (r){

6 $.post('destroy_user.php',{id:row.id},function(result){

7 if (result.success){

8 $('#dg').datagrid('reload'); // reload the user data

9 } else {

10 $.messager.show({ // show error message

11 title: 'Error',

12 msg: result.errorMsg

13 });

14 }

15 },'json');

16 }

17 });

18 }

19 }

 在刪除行，我們會(huì)顯示一個(gè)確認(rèn)對(duì)話框，讓用戶來決定是否要真的刪除該行數(shù)據(jù)。當(dāng)成功地刪除數(shù)據(jù)，會(huì)使用稱之為"重裝"的方法來刷新數(shù)據(jù)網(wǎng)格的數(shù)據(jù)。

步驟7：運(yùn)行代碼

使用MySQL在瀏覽器中開始運(yùn)行該代碼。