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

第3步：建立表格對話框

建立或編輯一個用戶，咱們使用相同的對話框。

1 <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px

 

2 closed="true" buttons="#dlg-buttons">

 

3 <div class="ftitle">User Information</div>

 

4 <form id="fm" method="post" novalidate>

 

5 <div class="fitem">

 

6 <label>First Name:</label>

 

7 <input name="firstname" class="easyui-textbox" required="true">

 

8 </div>

 

9 <div class="fitem">

 

10 <label>Last Name:</label>

 

11 <input name="lastname" class="easyui-textbox" required="true">

 

12 </div>

 

13 <div class="fitem">

 

14 <label>Phone:</label>

 

15 <input name="phone" class="easyui-textbox">

 

16 </div>

 

17 <div class="fitem">

 

18 <label>Email:</label>

 

19 <input name="email" class="easyui-textbox" validType="email">

 

20 </div>

 

21 </form>

 

22 </div>

 

23 <div id="dlg-buttons">

 

24 <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>

 

25 <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>

 

26 </div>

也沒有用javascript代碼建立的對話框。

步驟4：執行建立和編輯的用戶

當建立一個用戶，咱們打開對話框，清除表單數據。

1 function newUser(){

 

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

 

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

 

4 url = 'save_user.php';

 

5 }

編輯用戶的時候，咱們打開對話框，從選定的datagrid加載表單數據行。

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"存儲的URL地址，其中的form 將發佈的時候保存用戶數據。

步驟5：保存用戶數據

保存用戶數據,咱們使用下面的代碼：

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 = eval('('+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 }

在提交表單時，"onsubmit"的函數將被調用，在其中咱們能夠驗證表單字段的值。當窗體字段值成功時，關閉對話框並從新加載數據網格的數據。

步驟6：刪除用戶

要刪除一個用戶，咱們使用下面的代碼：

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 }

在刪除行，咱們會顯示一個確認對話框，讓用戶來決定是否要真的刪除該行數據。當成功地刪除數據，會使用稱之爲"重裝"的方法來刷新數據網格的數據。

步驟7：運行代碼

使用MySQL在瀏覽器中開始運行該代碼。

>>jQuery EasyUI試用版下載地址<<