為了大家能夠更好的學習和使用Jqgrid網格插件，我決定用Strtus2+Spring+hibernate+Jquery+Jqgrid實現一個Jqgrid網格插件的demo。當然官方網站上面已經有了PHP版本和ASP.NET版本的DEMO，地址：
http://www.trirand.com/blog/?page_id=5 。我做的算是一個java版本的。為提高用戶體驗，頁面與后台采用ajax交互，全程無刷新。
如果你還不了解Jqgrid網格插件的強大的處，也不了解Jqgrid的基本用法，可以先去
www.javakfz.com看看關於Jqgrid的文章。這篇文章的重點是放在demo上面的，所以不會對網格插件追究太深。
廢話不多說了，先上一張全景圖。
這是最基本的需求，能夠分頁顯示數據，點擊任意列名可以排序，輸入學生姓名可以自動提示(類似百度的效果)，左下角的五個按鈕分別是增刪改查功能的實現，我並沒有通過這種方式實現，只是顯示出來表示有這種功能。比如按年齡排序，效果圖：
此時的年齡是按照從小到大的順序，再次點擊列頭就是倒序排列。比如班上的學員太多了，你知道他的名字，但是不知道他在第幾頁。所以要提供一個模糊查詢的功能。比如在學生姓名輸入框輸入“李”，會把姓李的同學顯示在下拉列表框中，上下鍵可以選擇，點擊選中的學生再按ENTER鍵就能實現查詢功能。效果圖：
如果選擇了李軍同學，點擊ENTER鍵。效果圖：
當然如果只輸入了“李”字，沒有選擇具體的學生，那么將把所有姓李的學生全部查詢出來。下拉列表的項是姓名+學號拼接而成的，具體實現可以看action中的代碼。
二級表頭的實現，這種情況主要用於比較。如果要比較學生幾個月的成績變化情況。可以用二級表頭實現，在數據表達上也比較直觀。效果圖：
圖中基本信息就是二級表頭，下面又分了姓名、年齡和性別三個子項。二級表頭比較數據變化還是比較方便。
二級表頭是列的數據比較，那么假如想要實現行數據比較該怎么辦呢？那么可以用到列托動了。選中數據，按住鼠標左鍵可以任意拖動。比如我們要把上圖中的張民生和李軍拖到本頁的最后兩行。拖動后效果：
拖動到具體的位置，就可以直觀的比較行數據的變化。但是這個效果刷新頁面就不存在了。
數據分組，這種情況就類似於group by語句，比如根據家庭住址來分組。來看看那個地方的人比較多，哪個地方的人比較少。效果圖：
最近工作比較忙，也沒有太多時間給大家發送郵件，直接去我的百度網盤提取吧。地址：
http://pan.baidu.com/share/link?shareid=2574304010&uk=587859240 提取碼：x79g 請繼續關注
www.javakfz.com 以后將不定期更新原創文章。你的關注將是我最大的動力！