龍之家族

引用網址：http://www.misterngan.com/843/jqgrid-%E7%A9%B6%E7%AB%9F%E6%9C%89%E5%A4%9A%E5%A5%BD%E7%94%A8/

在 現 今 的 商 業 社 會 ，做 什 麼 Project 都 是 一 個 快 字 ，所 以 有 很 多 工 具 來 協 助 開 發 者 火 速 完 成 手 頭 上 的 工 作 。我 很 喜 歡 那 些 的 工 具 的 一 個 說 法 ，「可 以 讓 開 發 者 專 注 於 開 發 系 統 的 功 能 ，而 不 是 浪 費 時 間 枯 燥 地 寫 code」。其 實 那 些 什 麼 class、library、framework、甚 至 IDE，都 是 為 了 減 少 開 發 者 「枯 燥 地 寫 code」的 。

今 天 介 紹 的 不 是 一 個 新 的 工 具 ，但 經 過 多 年 發 展 ，卻 已 經 發 展 成 為 一 個 十 分 成 熟 而 且 完 備 的 工 具 。今 天 要 介 紹 的 就 是 jqGrid。

jqGrid 是 用 jQuery 開 發 的 Grid 工 具 。jQuery 則 是 javascript 的 一 套 library。寫 jQuery 比 起 直 接 寫 javascript 會 簡 化 了 很 多 ，但 當 然 jQuery 是 用 javascript 寫 的 ，所 以 不 可 能 有 jQuery 能 做 得 到 ，javascript 卻 做 不 到 的 事 ，頂 多 是 寫 javascript 會 煩 一 點 。

jQuery 這 個 library 裡 面 ，預 先 寫 好 了 很 多 特 效 ，更 有 一 大 堆 十 分 常 用 的 jQuery UI，對 開 發 者 來 說 真 是 一 大 喜 訊 。特 別 是 對 於 我 這 種 不 懂 搞 美 術 的 programmer，除 手 拿 一 個 datepicker 來 用 ，不 只 功 能 強 勁 ，還 十 分 美 觀 。所 有 的 jQuery UI 還 是 共 用 一 個 theme，保 證 了 整 個 網 站 的 統 一 。jQuery 網 站 上 還 做 好 了 二 十 多 個 不 同 的 顏 色 主 題 給 你 選 擇 ，總 有 一 個 乎 合 你 的 需 要 。（當 然 ，你 也 可 以 很 簡 單 地 修 改 CSS 來 建 造 你 自 己 獨 特 的 theme。）

但 有 一 點 很 可 惜 ，就 是 jQuery UI 裡 面 沒 有 Grid 這 種 超 常 用 的 工 具 。於 是 ，就 有 很 多 不 同 的 Grid plugin 被 其 他 人 開 發 出 來 。今 次 要 介 紹 的 jqGrid 也 是 其 中 之 一 。

Grid 是 一 個 看 起 來 像 excel spreadsheet 的 table，最 起 碼 的 會 包 含 排 序 （sorting）、分 頁 （paging）等 功 能 。好 一 點 的 還 可 以 篩 選 （filtering）、分 組 （grouping）。再 好 一 點 的 可 以 用 subgrid 來 顯 示 子 母 資 料 表 （Master, detail table），可 以 直 接 在 grid 修 改 資 料 （edit）。

那 jqGrid 有 什 麼 利 害 的 呢 ？它 的 form editing 可 以 自 動 生 成 add, edit, view, search 的 表 單 。而 且 自 動 生 成 的 表 單 ，可 以 自 定 的 部 分 相 當 的 多 。

例 如 在 自 動 生 成 的 search 表 單 ，可 以 輕 易 的 使 用 jQuery UI 的 小 工 具 ，例 如 下 面 我 就 使 用 了 autocomplete。

Autocomplete in Search

又 例 如 在 View 表 單 ，我 們 可 以 顯 示 圖 片 ，和 下 載 檔 案 的 超 連 結 。

Show Picture in View

在 新 增 表 單 ，我 們 可 以 自 定 每 個 欄 位 的 種 類 ，可 以 是 text、textarea、select、checkbox，甚 至 是 file 。我 們 也 可 以 自 定 每 個 欄 位 在 表 單 的 位 置 。

Add New

如 同 search 一 樣 ，我 們 也 可 以 在 Add / Edit 表 單 使 用 jQuery UI，例 如 上 例 我 就 用 了 一 個 datepicker。jqGrid 也 內 建 了 data validation，上 圖 中 紅 色 outline 的 就 是 必 要 欄 位 。當 然 也 可 以 驗 正 數 字 、整 數 、電 郵 地 址 、限 制 長 度 等 等 。

請 注 意 ，以 上 種 種 ，都 是 只 需 要 在 建 立 jqGrid 的 時 候 ，以 參 數 的 形 式 設 定 好 ，我 們 並 不 需 要 為 那 幾 張 表 單 撰 寫 任 何 程 式 碼 。它 們 都 是 jqGrid 自 動 生 成 的 ，包 括 data validation 都 是 。

還 有 ，jqGrid 內 建 的 event 也 很 完 備 ，方 便 我 們 可 以 在 不 同 的 時 間 插 手 去 修 改 資 料 ，或 者 jqGrid 的 選 項 。

例 如 在 使 用 Add / Edit 表 單 時 ，jqGrid 就 有 beforeShowForm 、afterShowForm 、onClickSubmit 、beforeCheckValues 、beforeSubmit 、afterSubmit 、onClose 等 等 十 多 個 大 大 小 小 的 event。

雖 然 jqGrid 是 超 級 強 大 ，但 當 然 也 有 其 限 制 。首 先 因 為 jqGrid 是 由 javascript 所 寫 成 的 ，所 以 它 必 然 是 在 client side 執 行 的 ，換 言 之 ，jqGrid 本 身 是 不 可 能 直 接 到 資 料 庫 取 得 資 料 的 。要 連 接 資 料 庫 ，我 們 還 是 必 須 要 乖 乖 的 撰 寫 server side 的 程 序 。筆 者 本 身 最 常 寫 的 是 php + mysql，再 把 資 料 包 裝 成 json 傳 回 至 jqGrid（php 的 json_encode）。一 來 是 php 對 json 的 支 援 度 較 高 ，二 來 ，據 說 json 比 xml 可 以 快 數 十 ，甚 至 上 百 倍 。

如 果 大 家 有 寫 開 Ajax 應 該 對 json / xml 不 會 陌 生 。要 是 你 沒 寫 過 ，其 實 也 沒 有 什 麼 難 以 理 解 的 。你 就 想 像 json 是 一 個 php array 變 數 ，我 們 先 把 php 從 mysql 資 料 庫 取 出 來 的 資 料 都 存 在 json 變 數 裡 面 ，再 把 這 個 array 變 數 傳 回 jqGrid，再 由 jqGrid 讀 取 這 個 變 數 裡 面 的 資 料 ，再 顯 示 到 網 頁 上 面 。

筆 者 本 來 是 開 發 php 為 主 的 ，所 以 也 看 到 過 好 幾 個 php 的 grid class / control 是 由 jqGrid 發 展 出 來 的 （我 想 因 為 jqGrid 的 強 大 ，其 他 php 以 外 的 語 言 也 有 類 似 的 control 吧 ？）。但 筆 者 覺 得 那 些 php control 都 少 了 jqGrid 在 client side 的 靈 活 性 。

所 以 ，筆 者 還 是 覺 得 在 client side 使 用 jqGrid，在 server side 使 用 php output json，是 比 較 好 的 解 決 方 案 。筆 者 也 覺 得 這 樣 能 夠 減 少 伺 服 器 的 負 荷 。

由 下 星 期 起 ，筆 者 會 花 幾 個 星 期 的 時 間 ，詳 細 地 介 紹 一 下 使 用 jqGrid 的 一 些 技 巧 。