如果利用xjplugin編寫基於web的應用系統

之前發布了一些基於jquery的js外掛程式，旨在方便大家能夠方便快捷的搭建用戶端UI介面，最初的目的是希望能夠提供一個脫離伺服器端控制項的UI解決辦法，之前我單獨寫了各個控制項的簡要實現方法和調用說明，並提供了一個demo來示範控制項的使用 ，大家可以通過http://code.google.com/p/xjplugin 的svn處擷取最新的代碼，其實所有的js 最新代碼也可以到我即將發布的xEasyApp 的demo裡獲得。

前面提到了xEasyApp，是個什麼東西呢，其實我想說它只是一個demo，目的是如果使用xjplugin和ASP.NET MVC結合構建基於web的應用系統，本demo實現了一個完整的許可權管理模組，我想也是一個應用系統必備的模組，選擇這樣一個模組，是因為第一它比較通用，基本上所有的應用系統都需要，那麼大家在開始編碼的時候可以直接在這個demo的基礎上開始工作了。第二這個模組說簡單不簡單，說複雜呢也不算複雜，所包含的介面我想基本上涵蓋了常用的幾種列表和表單情況，但願能說明問題。

哈哈，任何系統從登陸開始，這個登入頁雖然是我最後做的，但是最先介紹，我覺得還蠻有意思的，但願有人能懂

 

登入成功之後，進去頁面的主介面，這是一個看上去單頁面的系統，其實本質不是單頁面，中間其實是用iframe載入各自的頁面，頁面風格類似EXTJS，如果大家有比較好的美工和js基礎可以替換和圖片css技能實現換膚，但是我覺得還蠻順眼的，來看看介面吧

可以看到主介面用到兩個前面提到的控制項一個是tree（打造基於jQuery的高效能TreeView），另外一個是tabpanel（基於jQuery打造TabPanel），首頁我留白了，在實際系統中大家可以豐富首頁的部分。

 

點擊左側的使用者管理菜單可在右側主地區新增一個選項卡，並自動載入使用者管理的介面。 主介面還是分為兩欄左側是部門列表，右側為使用者列表，這種結構的介面，基本上所有的主從表結構的表單可以都支援了。右側的列表使用flexigrid，在寫這個demo的同時，我也對flexigrid也進行了一些修改，比如這裡添加了行號的功能；增加往服務端發送列資訊。以便更好和後端配合，避免後端的欄位必須和前端順序一樣的尷尬問題。同時這裡我新增了操作列，並放棄來原來一直使用的右鍵菜單（簡簡單單右鍵菜單）的方式。

 

點擊編輯按鈕彈出編輯視窗（其實是div模仿的模態視窗） ，使用的控制項是jquery.ifrmdailog（這個控制項之前沒有介紹過，但是在xgcalendar中有使用過，很多同學來問過我代碼，有空的話我單獨介紹一下這個控制項的使用）

點擊移動 可變更使用者所屬的組織，此處在視窗中又彈出了一個選擇框（以前我一般都會採用模態對話方塊），這裡這個控制項還是jquery.ifrmdailog（注意哦，這裡沒有邊框哦） ，本demo中有很多個這種應用，還有更複雜的比如多選等等。如所示

是往角色中新增人員的選擇介面。

表單中用戶端驗證是非常實用的功能不能沒有，這裡使用的控制項是大名鼎鼎的jQuery Validation （這可不是我寫的），當然那個很酷的提示訊息是我的傑作，哈哈。。

最後一個比較常用的介面布局就是查詢頁了，查詢頁可以參考動作記錄查詢介面

 

 

查詢條件可分為一行和多行，根據的實際條件樹調整，下面是日誌列表還是flexigrid。

本來我是給datepicker（打造基於jQuery的日期選擇控制項）添加了一個選擇時分秒的功能，哈哈但是沒有地方應用了（忽然想到上面的這個頁面可以加上哦。。等後面加上去）

整個代碼可以從這裡獲得http://code.google.com/p/xeasyapp/downloads/list ，接著我會通過幾篇博文，更加細化的介紹各個控制項在實際使用中如何和服務端互動，並且介紹一下我在demo中提供的快捷方法。我覺得非常好的編程方式和體驗。大家也歡迎大家對此demo提出自己的意見和建議，同時也歡迎批評之聲。如果反響好的話，我再介紹下如何在webform中更好的使用xjplugin。

 

你的支援就是我繼續寫作的動力！

 

本文地址：http://www.cnblogs.com/xuanye/archive/2011/06/27/xEasyApp_ByXjplugin.html 

轉載請保留

另外做個廣告哦，我的微博（http://weibo.com/redhu） 歡迎大家圍觀.