摘要：MVC三層架構(gòu)是一種經(jīng)典的設(shè)計(jì)模式，MVC的思想是將“顯示”（View）、“數(shù)據(jù)”（Model）和“控制”（Control）分開。而Jquery UI作為前端視圖的一種流行插件，也正逐漸得到廣泛應(yīng)用。其中Datagrid是數(shù)據(jù)庫(kù)WEB頁(yè)面呈現(xiàn)較頻繁的一種樣式，設(shè)計(jì)中，數(shù)據(jù)在呈現(xiàn)于WEB頁(yè)面前，已事先被封裝為JSON格式的數(shù)據(jù)，數(shù)據(jù)和顯示及控制是分開進(jìn)行的。

關(guān)鍵詞：Jquery；JSON數(shù)據(jù)格式；MVC三層架構(gòu)

中圖分類號(hào)：TP311.13 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9599 （2012） 22-0000-03

1 前言

在WEB服務(wù)的開發(fā)應(yīng)用中，MVC多層次架構(gòu)設(shè)計(jì)已逐漸成為了一種流行的設(shè)計(jì)思想。在早期基于PHP開發(fā)WEB服務(wù)應(yīng)用時(shí)，一般是把HTML的產(chǎn)生放在PHP中[1]，PHP開發(fā)人員需對(duì)HTML等前端技術(shù)也要有較深入的了解，才能進(jìn)行開發(fā)。而目前，隨著模型-視圖-控制器開發(fā)模式的引入，它不僅減輕了開發(fā)人員的負(fù)擔(dān)，而且也增加了設(shè)計(jì)應(yīng)用中的靈活性。提高了系統(tǒng)的可維護(hù)性、可擴(kuò)展性和可移植性。其中，在視圖前端Web UI技術(shù)中關(guān)于數(shù)據(jù)庫(kù)數(shù)據(jù)網(wǎng)格的操作是較頻繁的一類應(yīng)用需求。EasyUI DataGrid作為現(xiàn)較流行的一種數(shù)據(jù)網(wǎng)格插件，已得到了廣泛的運(yùn)用。它是一個(gè)用Jquery[2]寫的DataGrid，在具體產(chǎn)生DataGrid時(shí)可有兩種方法來實(shí)現(xiàn)：

（1）使用PHP等后臺(tái)語(yǔ)言直接產(chǎn)生HTML語(yǔ)法來顯示DataGrid，當(dāng)要對(duì)該DataGrid操作時(shí)，在傳遞參數(shù)到后端，重新產(chǎn)生整個(gè)網(wǎng)頁(yè)。

（2）先形成JSON格式[3]數(shù)據(jù)給前端，前端接收到JSON格式數(shù)據(jù)后，再分析并處理數(shù)據(jù)，然后利用JQuery刷新該DataGrid，以便實(shí)現(xiàn)數(shù)據(jù)的呈現(xiàn)更新。其中，第二種方法，結(jié)構(gòu)相對(duì)獨(dú)立清晰，且前后端分離處理，增加了設(shè)計(jì)的靈活性。

下面的設(shè)計(jì)是以第二種方法（如圖1所示）來具體實(shí)現(xiàn)的。

2 利用EasyUI datagrid實(shí)現(xiàn)數(shù)據(jù)呈現(xiàn)

上述腳本中，指出了后端服務(wù)器數(shù)據(jù)處理的文件是yhsc.php、add_user.php、update_user.php，這幾個(gè)文件需在服務(wù)器端預(yù)定義好。當(dāng)數(shù)據(jù)網(wǎng)格初始界面生成后，由dispall（）函數(shù)裝載所有班級(jí)數(shù)據(jù)，裝載過程中，按設(shè)置好的分頁(yè)條數(shù)提示正在裝載該頁(yè)，并顯示一些分頁(yè)信息在數(shù)據(jù)網(wǎng)格中。

前端用戶的操作可有以下幾類：

（1）點(diǎn)擊某行數(shù)據(jù)時(shí)，記錄下行號(hào)；

（2）點(diǎn)擊增加用戶工具按鈕時(shí)，則網(wǎng)格數(shù)據(jù)的尾部中增加一個(gè)空行，并修改數(shù)據(jù)行數(shù)，設(shè)定增加的行處于選中并進(jìn)入可編輯狀態(tài)；

（3）點(diǎn)擊刪除用戶工具按鈕時(shí)，則得到選中的需刪除的用戶數(shù)據(jù)行，并提醒用戶和執(zhí)行該行在網(wǎng)格中的刪除，而后端數(shù)據(jù)庫(kù)相應(yīng)數(shù)據(jù)的刪除，將提交給服務(wù)器端的yhsc.php文件中的代碼去完成；

（4）點(diǎn)擊保存工具按鈕時(shí)，則如果是需保存增加的用戶行數(shù)據(jù)，那么將得到該行，并提交給add_user.php完成后端服務(wù)器上數(shù)據(jù)庫(kù)的數(shù)據(jù)添加，否則如果是需保存用戶已修改了的某行數(shù)據(jù)，則提交該行給update_user.php完成后端服務(wù)器數(shù)據(jù)庫(kù)的數(shù)據(jù)修改，上述兩個(gè)過程實(shí)際上是個(gè)異步執(zhí)行過程；

（5）點(diǎn)擊搜索工具按鈕時(shí)，將得到用戶在組合框中選擇的班級(jí)ID，并提交給后端服務(wù)器inyh.php文件（初始化界面時(shí)定義）去執(zhí)行該班級(jí)用戶數(shù)據(jù)的裝載。

3 結(jié)論

可以看到，采用EasyUI datagrid后，數(shù)據(jù)庫(kù)的后端操作非常簡(jiǎn)單，實(shí)現(xiàn)起來較方便。Jquery EasyUI作為流行的WEB開發(fā)插件，目前正得到越來越多的廣泛應(yīng)用，本文旨在介紹自己利用Datagrid在實(shí)際開發(fā)應(yīng)用的一點(diǎn)經(jīng)驗(yàn)積累，冀望促進(jìn)相關(guān)的應(yīng)用設(shè)計(jì)交流。

參考文獻(xiàn)：

[1]趙增敏.PHP動(dòng)態(tài)網(wǎng)站開發(fā)[M]，北京：電子工業(yè)出版社.2009.

[2]季國(guó)飛.jQuery開發(fā)技術(shù)詳解[M]，北京：電子工業(yè)出版社.2010：5-10.

[3]巴班.Ajax與PHP基礎(chǔ)教程[M]，北京：人民郵電出版社.2007：120-130.

基金項(xiàng)目：百色學(xué)院院級(jí)項(xiàng)目支持，項(xiàng)目編號(hào)：百院2010KB13。

作者簡(jiǎn)介：楊旭光（1971-），男，江西九江人，講師，研究生，研究方向：軟件水印，數(shù)據(jù)庫(kù)技術(shù)。