龍之家族

引用網址：http://www.misterngan.com/868/jqgrid-%E5%AF%A6%E7%94%A8%E6%8A%80%E5%B7%A7-%E4%BA%8C/

今 次 開 始 講 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 方 面 的 設 定 。