▶ 技術交流

jqGrid - 七分前端三分後端實用的表格套件(Grid Control)

文 - 許耕豪


在現今的網路時代中,jQuery 已經被廣泛地使用,也因此延伸出許許多多的套件,由於 jQuery 的跨平台與支援多瀏覽器的特性,所以這些受歡迎的套件受到全球開發者喜愛與運用。在 jQuery 表格套件(Grid Control)中,以 DataTables 跟 jqGrid 較受到許多開發者的運用,這次的介紹將以 jqGrid 為主。

圖 1 - jqGrid 基本畫面(擷取於 demo 頁面)

JqGrid 是一套 jQuery 所延伸出來的套件(plug-in),因此他具有跨瀏覽器與跨平台的特性,在頁面使用上可以套用 jQuery UI 的主題(theme)或是使用者自訂 CSS 來符合使用者需求,在資料面部分,可以不限伺服器端程式語言開發,只要可以送出符合 jqGird 的格式,皆能在頁面中顯示出資料,所以無論是 ASP.NET、PHP、ASP、Java Servlets、JSP、ColdFusion、Perl 都可以搭配使用。

JqGrid 與傳統伺服器端控制項的差異

JqGrid 的效果就如同 ASP.NET 中的 gridview 控制項(controls),因為 jqGrid 是前端的套件,因此在接收資料這部分是經由AJAX(註一)的方式來與伺服器端溝通,因此可以避免頁面的 postback 。在資料方面由於支援多種格式,這部分讓開發者在設計上可以根據需求來變更格式,在處理上會更有彈性。此外,jqGrid 提供許多內建功能如:搜尋、排序、分頁……等,可以經由 jqGrid 屬性控制來加以運用,這方面可以減少開發者在程式碼撰寫上的困擾與減少開發時間。

jqGrid 的特色

  1. 可讀取多種資料格式:XML、JSON、ARRAY。
  2. AJAX-enabled:透過 AJAX 方式來與 Server 端來存取資料,提升效率。
  3. 完整的表格功能:包含換頁、欄位排序、grouping、新增、修改及刪除資料等功能。
  4. 支援 CSS:可搭配 jQuery UI 和 CSS,快速設定表格樣式。
  5. 跨瀏覽器:IE、Chrome、Firefox……etc。
  6. 支援多種資料格式:例如 int、float、string、date。
  7. 內建編輯、篩選與搜尋功能。

jqGrid 是否要付費

目前 jqGrid 有免費版本可供大部分的開發者使用,但官網還是提供付費版本可讓開發者做選擇,主要差異在於官方將原有的 jqGrid 控制項化,因此開發者可以針對使用的開發語言直接使用包裝好的 controls,在開發上可以節省非常多的時間,程式碼撰寫部分也將減少許多。在付費版本中目前只有 ASP.NET、ASP.NET MVC、PHP 版本,目前尚未看到 JAVA 版本,因此若有需求可以到官網取得付費測試版本,體驗一下免費版本與付費版本之間的差異。

jqGrid 運用

jqGrid 運用與開發彈性非常強大,甚至可以搭配 jQuery UI 裡的 theme 來做變化,但是要精深則需要有一定時間的研習,而且開發人員必須具有基本的 jQuery 使用經驗,因此使用上會有門檻。若是開發人員可以跨過這門檻,在開發大型專案時,能夠實際將 jqGrid 整合到頁面中,對於整體網站來講,無疑是非常有幫助的。

註解

註一:AJAX 即 "Asynchronous JavaScript and XML"(非同步的 JavaScript 與 XML技術)

相關網址

jqGrid 官網:http://www.trirand.com/blog/
jqGrid 付費部分:http://www.trirand.net/
jqGrid Demo:http://trirand.com/blog/jqgrid/jqgrid.html

推Plurk
列印