jqGrid 實用技巧 (二) 規劃你的 jqGrid

今 次 開 始 講 colModel。其 實 所 有 grid 類 的 control,column 的 設 定 都 非 常 重 要 。因 為 很 多 時 候 ,資 料 庫 儲 存 的 資 料 和 客 戶 端 顯 示 的 資 料 都 不 盡 相 同 。最 簡 的 boolean field,我 們 很 可 能 會 顯 示 為 check box,而 不 是 true / false,或 者 0 / 1。又 或 者 一 個 有 限 的 分 類 ,資 料 庫 很 可 能 只 是 儲 存 該 分 類 的 號 碼 ,而 不 是 分 類 的 名 稱 。例 如 1-HK Island,2-Kowloon, 3- NT,資 料 庫 儲 存 為 1,但 實 際 上 我 們 卻 要 顯 示 為 HK Island。

一 般 的 grid 對 於 上 述 的 顯 示 選 項 都 很 完 備 ,但 由 於 jqGrid 功 能 特 多 ,所 以 colModel 的 設 定 亦 相 對 地 多 很 多 。不 過 實 地 去 操 作 colModel 之 前 ,更 重 要 的 是 去 規 劃 你 的 資 料 庫 ,以 及 前 台 的 應 用 程 式 。

讓 我 舉 一 個 實 例 吧 ,我 剛 好 要 為 一 個 客 戶 編 寫 一 個 管 理 辦 公 室 裡 面 的 資 產 的 應 用 程 式 。在 資 產 的 資 料 表 (table)裡 面 ,我 一 共 設 計 了 很 多 的 欄 位 (fields),例 如 必 要 的 id (primary key, autoincrement),asset_id(unique key,按 照 該 客 戶 一 向 使 用 的 準 則 來 設 計 ),asset_name, cost, purchase_date 等 等 。又 因 為 該 客 戶 有 很 多 重 覆 的 資 產 ,例 如 他 們 會 一 次 買 十 多 台 相 同 型 號 的 電 腦 ,為 了 容 易 分 辨 ,我 又 增 加 了 brand, model_number, serial_number 等 等 的 欄 位 。又 因 為 有 一 半 以 上 的 資 產 都 是 電 器 之 類 有 保 用 期 的 物 品 ,為 了 方 便 查 找 相 關 資 料 ,我 又 增 加 了 vendor, invoice_number, warranty_detail, buyer 等 等 的 資 料 。然 後 有 一 大 堆 系 統 內 部 使 用 的 欄 位 ,例 如 create_date, create_user, modify_date, modify_user, del_date, del_user 等 等 。當 然 也 有 一 些 客 戶 特 別 指 定 的 其 他 欄 位 。

上 面 一 大 堆 欄 位 ,最 簡 單 地 可 以 先 分 成 兩 堆 ,必 然 是 使 用 者 輸 入 的 ,和 必 然 不 是 使 用 者 輸 入 的 。很 明 顯 ,在 新 增 /修 改 的 表 單 裡 ,只 需 要 顯 示 使 用 者 輸 入 的 欄 位 ,其 他 系 統 使 用 的 欄 位 都 是 多 餘 的 ,只 會 給 使 用 者 添 加 混 亂 。

第 二 步 ,因 為 整 個 資 料 表 有 二 十 個 欄 位 ,又 有 很 多 欄 位 不 是 必 須 填 寫 的 欄 位 ,所 以 在 grid 裡 面 要 顯 示 多 少 欄 位 ,也 是 你 要 決 定 的 事 。把 二 十 個 欄 位 都 顯 示 出 來 明 顯 是 多 餘 的 ,在 這 個 案 例 ,我 參 考 了 客 戶 以 往 使 用 的 excel 報 表 ,只 顯 示 了 八 九 個 欄 位 。

然 後 ,你 就 可 以 整 理 出 分 成 四 大 類 的 欄 位 。(一 )有 在 grid 顯 示 的 欄 位 ,使 用 者 可 以 輸 入 /修 改 的 欄 位 ;(二 )有 在 grid 顯 示 ,但 使 用 者 不 得 輸 入 /修 改 的 欄 位 ,例 如 那 個 primary key id;(三 )沒 有 在 grid 顯 示 ,但 需 要 出 現 在 新 增 /修 改 表 單 ,給 使 用 者 輸 入 的 欄 位 ,例 如 brand, model_number 之 類 ;(四 )不 會 出 現 在 前 台 ,只 會 在 後 台 使 用 的 欄 位 ,例 如 create_date, create_user 之 類 。當 我 們 建 構 整 個 jqGrid 的 時 候 ,上 面 的 分 類 你 自 己 要 很 清 醒 的 記 著 。

(一 )是 最 常 見 的 。就 是 我 們 有 在 grid 顯 示 ,也 可 以 新 增 /修 改 。例 如 下 例 中 的 資 產 名 稱 ,加 了 editable:true 選 項 ,就 會 自 動 在 新 增 /修 改 表 單 出 現 了 。

$("#list").jqGrid({
....
colModel :[
....
{name:'asset_name', index:'asset_name', editable:true},
....
],
....
});

(二 )也 很 常 見 ,而 且 最 簡 單 。例 如 primary key id,使 用 者 是 不 能 修 改 的 。只 要 不 加 editable:true 選 項 ,使 用 者 就 不 能 新 增 /修 改 了 。

$("#list").jqGrid({
....
colModel :[
....
{name:'id', index:'id'},
....
],
....
});

(三 )開 始 要 一 點 點 技 巧 ,因 為 要 在 新 增 /修 改 表 單 顯 示 ,所 以 我 們 也 要 把 它 們 加 入 grid 中 ,但 在 平 時 是 隱 藏 它 們 ,這 就 是 hidden:true。由 於 是 可 以 修 改 的 ,所 以 editable:true。但 jqGrid 預 設 是 如 果 hidden:true,在 表 單 也 不 會 出 現 的 ,於 是 我 們 要 另 外 加 上 editrules:{edithidden:true}。此 外 ,為 了 更 好 地 隱 藏 這 些 欄 位 ,所 以 加 了 hidedlg:true,這 樣 的 話 ,使 用 者 即 使 打 開 了 show / hide columns dialog,都 不 會 見 到 這 個 欄 位 。

$("#list").jqGrid({
....
colModel :[ 
....
{name:'brand', index:'brand', hidden:true, editable:true, editrules:{edithidden:true}, hidedlg:true},
....
],
....
});

(四 )這 一 部 分 就 更 簡 單 了 ,因 為 jqGrid 是 純 客 戶 端 的 程 式 ,根 本 就 管 不 到 後 台 的 事 ,所 以 就 根 本 什 麼 也 不 用 做 。這 部 分 只 要 在 後 台 的 php 做 好 就 行 了 。

如 果 你 在 建 立 一 個 新 的 jqGrid 之 前 ,能 夠 做 好 上 面 的 規 劃 ,那 你 往 後 的 工 作 就 不 會 越 來 越 混 亂 了 。下 星 期 我 們 講 search 方 面 的 設 定 。

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

2 Responses to jqGrid 實用技巧 (二) 規劃你的 jqGrid

  1. tony says:

    請問如何取得jqgrid內各資料欄位的寬度,
    因為想記錄使用者調整後的各各寬度
    謝謝!!

    • C.T. Leung says:
      var a = $("#tableGrid").jqGrid('getGridParam','colModel');
      alert(a[0].width);
      alert(a[1].width);
      ......

      但是 jqGrid 的 Column Width 實在是一個 tricky thing,我到現在還沒完全搞清楚,哈哈。例如 header 的 width 和 data 的 width 經常性不一致(兩者的 border 不同 ?!);用程式碼去設定好 column width 之後,再讀出來又有變化(這大概是 autofit 在搞鬼?!)。總之,祝君好運吧……

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>