天天看點

jQuery EasyUI 應用 - 建立 CRUD 應用

資料收集并妥善管理資料是網絡應用共同的必要。CRUD 允許我們生成頁面清單,并編輯資料庫記錄。本教程将向你示範如何使用 jQuery EasyUI 架構實作一個 CRUD DataGrid。

我們将使用下面的插件:

datagrid:向使用者展示清單資料。

dialog:建立或編輯一條單一的使用者資訊。

form:用于送出表單資料。

messager:顯示一些操作資訊。

我們将使用 MySql 資料庫來存儲使用者資訊。建立資料庫和 'users' 表。

jQuery EasyUI 應用 - 建立 CRUD 應用

建立沒有 javascript 代碼的 DataGrid。

我們不需要寫任何的 javascript 代碼,就能向使用者顯示清單,如下圖所示:

jQuery EasyUI 應用 - 建立 CRUD 應用

DataGrid 使用 'url' 屬性,并指派為 'get_users.php',用來從伺服器檢索資料。

get_users.php 檔案的代碼

我們使用相同的對話框來建立或編輯使用者。

這個對話框已經建立,也沒有任何的 javascript 代碼:。

jQuery EasyUI 應用 - 建立 CRUD 應用

當建立使用者時,打開一個對話框并清空表單資料。

當編輯使用者時,打開一個對話框并從 datagrid 選擇的行中加載表單資料。

'url' 存儲着當儲存使用者資料時表單回傳的 URL 位址。

我們使用下面的代碼儲存使用者資料:

送出表單之前,'onSubmit' 函數将被調用,該函數用來驗證表單字段值。當表單字段值送出成功,關閉對話框并重新加載 datagrid 資料。

我們使用下面的代碼來移除一個使用者:

jQuery EasyUI 應用 - 建立 CRUD 應用

移除一行之前,我們将顯示一個确認對話框讓使用者決定是否真的移除該行資料。當移除資料成功之後,調用 'reload' 方法來重新整理 datagrid 資料。

開啟 MySQL,在浏覽器運作代碼。

jeasyui-app-crud1.zip