JQGrid 究竟有多好用?

在 現 今 的 商 業 社 會 ,做 什 麼 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 的 一 些 技 巧 。

ctleung張 先 生 ,男 性 ,肖 龍 。
職 業 :I.T. Consultant
簡 介 :不 好 好 讀 書 ;七 尺 差 五 寸 ,手 長 過 膝 ,雙 耳 垂 肩 ;性 寬 和 ,寡 言 語 ,喜 怒 不 形 於 色 。據 說 少 時 曾 斬 白 蛇 於 鳳 凰 山 下 ……
This entry was posted in jqGrid and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>