摘要：Web系統最開始是作為網頁和網站載體，網頁的設計從模仿紙質媒體開始，而不是從模仿桌面應用程序開始，所以在桌面應用遷移到Web端時，很多設計也是采用了網頁設計的風格。其優點是采用現有技術，開發周期短，缺點是交互性和美觀性差。由于JavaScript尤其是jQuery在Web前端的廣泛應用，jQuery的擴展庫例如EasyUI模仿了傳統桌面應用的界面設計和良好的交互性，得到廣泛應用。通過jQuery EasyUI實現了項目管理系統的Web前端設計，具有較好的交互性和用戶友好性。
關鍵詞：jQueryEasyUI技術；Web前端設計
EasyUI是基 于jQuery的一套網頁前端布局插件，在風格上模仿了傳統桌面程序的布局，具有良好的交 互性和用戶友好性。在 設 計 項 目 管 理 系 統Web前端 時，除了登錄界面，都采取了EasyUI技術。EasyUI有20多種布局和控件，采用了其中的5種。以下為不同頁面和局部的設計：
1、項目管理系統總體布局
系統管理員登錄后的界面，采 用 了EasyUI的lay-out。缺省的按東南西北中5個方位的布局如圖1所示。
去掉了右側的East，頁面代碼如下：
2、項目列表
項目列表位于頁面的左側（west），用 樹 形 結 構（tree）來實現，如圖2所示。
3、子項目布局
4、表格
涉及到項目資金或者其他適合用表格來實現的地方，EasyUI的數 據 表 格（datagrid）更美 觀 實 用，而 且可以即時添加、刪除和更新數據。如圖3所示。
這里的數據調用采用了JSON技術，代 碼 第 二 行 的url:‘datagrid_data1.json’可以代替為從數據表中取值的代碼。
5、彈出對話框
對話框的布局如下：
打開和關閉對話框的JavaScript代碼如下：
對打開和關閉對話框的JavaScript代碼的調用方法如下：
6、結語
前端設計者從傳統的網頁Web轉到EasyUI方式 的設計，需要一些時間來學習和適應。對于沒有美工基礎的程序開發人員，也 可 以 用EasyUI進行Web系統 的 前端 設 計。EasyUI封裝 了jQuery和CSS的很 多 細 節，學習和使用的成本低。
參考文獻
[1]湯曉 燕.基于EasyUI框架 的Web異步 樹 實 現[J] .電腦編程技巧與維護，2012, 6（12）：92-93.
[2]喻健，朱 三 元.基于Entity Framework和easyUI的畢業 論 文 管 理 系 統[J] .軟件 工 程，2016，12（12）：40-42.
[3]鄧海,潘智,郭志 峰.基于MVC+EasyUI三層 架 構的權限管理模 塊設計與應用[J] .柳鋼科技，2017,4（2）:31-33
[4]朱鵬,郭亞莎.基于EasyUI框架 的Datagrid數據 呈現[J].電子世界，2017, 3（5）:165-166.(本文于2017年發表于《電腦編程技巧與維護》)
