jqGrid 實用技巧 (六) 完整的 colModel

之 前 已 經 講 了 好 多 堂 colModel,怎 麼 還 在 講 colModel 呢 ?因 為 colModel 正 正 就 是 jqGrid 根 本 之 根 本 。要 是 你 對 colModel 總 抱 著 一 知 半 解 就 可 以 的 態 度 ,是 不 會 學 得 好 jqGrid 的 。呵 呵 。

這 一 次 ,讓 我 們 看 幾 個 colModel 的 實 例 。第 一 個 ,我 們 先 看 最 簡 單 的 text input 型 態 的 欄 位 。

...
colModel :[
....
{name:'price',index:'price',width:50,formatter:'currency',formatoptions:{decimalSeparator:".", thousandsSeparator:",", decimalPlaces:2, prefix: "HK$ "},search:true,stype:'text',searchoptions:{sopt:['eq','ge','le']},searchrules{number:true,minValue:0,required:true}, editable:true,edittype:'text',editoptions:{size:10, maxlength:10},editrules:{number:true,minValue:0,required:true}},
....
],
...

有 點 長 ,有 點 嚇 人 ,是 吧 ?但 其 實 一 般 的 實 例 都 會 這 個 樣 子 ,正 常 情 況 之 下 ,很 少 機 會 是 什 麼 設 定 都 不 用 做 的 。其 實 如 果 你 把 上 面 的 參 數 都 分 成 一 組 一 組 的 看 ,其 實 也 很 易 懂 。首 先 是 name,index,width 這 些 基 本 的 東 西 ,然 後 是 和 view 有 關 的 formatter,再 然 後 是 search 有 關 的 ,最 後 是 edit 相 關 的 。只 要 你 都 像 筆 者 這 樣 把 參 數 分 門 別 類 整 理 好 ,就 不 會 混 亂 了 。

上 面 是 一 個 典 型 的 價 錢 欄 位 ,輸 入 的 型 態 就 用 text,formatter 就 用 currency,search 的 話 因 為 資 料 型 態 是 類 值 ,所 以 只 要 equal,greater than or equal,less than or equal 三 個 就 夠 了 ,search rules 就 是 必 須 輸 入 數 值 ,要 大 於 「0」,和 使 用 者 必 須 輸 入 數 值 。edit 方 面 和 search 類 似 ,也 就 是 edit rules 那 幾 點 。

這 樣 設 定 好 之 後 ,不 只 資 料 會 顯 示 得 美 觀 一 點 ,使 用 者 輸 入 的 時 候 又 會 自 動 做 data validation,search 的 部 分 也 自 動 做 好 ,而 且 ,連 search 的 時 候 也 會 做 data validation。就 是 這 樣 簡 單 地 寫 一 行 colModel,就 完 成 超 級 多 的 工 作 ,是 不 是 很 爽 呢 ?哈 哈 。

我 們 再 看 看 另 一 例 子 。

...
colModel :[
....
{name:'status',index:'status',width:30,formatter:'select',search:true,stype:'select',searchoptions:{value:"0:正 常 ;1:售 罄 ;2:暫 時 缺 貨 ", sopt:['eq']},editable:true, edittype:'select',editoptions:{value:"0:正 常 ;1:售 罄 ;2:暫 時 缺 貨 "}},
....
],
...

這 是 另 一 種 輸 入 型 態 ,Select 的 典 型 例 子 。上 例 中 的 欄 位 ,是 標 示 「庫 存 」的 狀 態 的 ,在 資 料 庫 只 儲 存 代 碼 ,0,1,2,相 對 應 的 狀 態 就 是 「正 常 」,「售 罄 」和 「暫 時 缺 貨 」。

因 為 資 料 只 有 三 個 可 能 性 ,所 以 我 們 會 用 select,方 便 使 用 者 輸 入 ,也 防 止 了 使 用 輸 入 了 其 他 沒 有 定 義 的 代 碼 。同 前 面 的 例 子 一 樣 ,我 們 先 有 幾 個 基 本 參 數 ,然 後 是 formatter,再 然 後 是 search,最 尾 是 edit。都 是 分 門 別 類 排 好 的 參 數 ,以 方 便 閱 讀 。上 例 中 比 較 值 得 注 意 的 是 formatter:’select’,這 個 本 身 沒 有 其 他 formatoptions 的 ,它 是 必 須 要 和 edittype:’select’ 一 起 用 的 ,它 的 options 就 是 editoptions。至 於 search 方 面 ,因 為 同 樣 的 使 用 了 select,所 以 只 用 equal 一 個 就 夠 了 。又 因 為 我 們 用 了 select ,data validation 也 就 無 關 重 要 了 。

...
colModel :[
....
{name:'description',index:'description',hidden:true,search:false,editable:true,edittype:'textarea',  editoptions:{rows:"5",cols:"100"}, editrules:{required:true,edithidden:true}},
....
],
...

第 三 例 就 簡 單 一 點 ,是 一 個 典 型 的 textarea 輸 入 。很 多 時 因 為 textarea 對 應 的 資 料 都 十 分 長 (基 本 資 料 內 容 是 篇 文 章 似 的 筆 者 才 會 用 textarea),所 以 基 本 上 都 不 能 夠 在 grid 中 完 整 的 顯 示 。就 算 你 做 了 line wrap,可 以 完 整 顯 示 ,那 又 要 佔 用 多 少 行 高 呢 ?總 不 成 一 筆 資 料 就 佔 去 半 版 吧 ?所 以 筆 者 就 比 較 喜 歡 把 這 些 欄 位 在 grid 中 隱 藏 ,在 Form 裡 面 才 顯 示 出 來 。

上 例 中 ,hidden:true,於 是 這 一 欄 位 就 不 會 顯 示 在 grid 了 。筆 者 的 例 子 只 是 一 篇 文 字 ,在 Form View 顯 示 也 沒 什 麼 問 題 ,所 以 就 沒 有 做 formatter 了 ,如 果 有 特 別 需 要 的 話 ,你 可 以 在 formatter 加 一 條 custom function。另 外 就 是 edithidden:true,筆 者 一 直 覺 得 這 個 參 數 的 名 字 怪 怪 的 ,但 由 於 是 jgGrid 內 部 定 義 的 ,大 家 乖 乖 的 跟 著 用 就 對 了 。

...
colModel :[
....
{name:'enable',index:'enable',width:10,formatter:'checkbox',search:true,stype:'select',searchoptions:{value:"0:停 用 ;1:正 常 ", sopt:['eq']}, editable:true, edittype:'checkbox',editoptions:{value:"1:0"}},
....
],
...

最 後 ,我 們 看 看 一 個 boolean 資 料 型 態 的 欄 位 。boolean 型 態 的 話 ,沒 有 比 用 checkbox 更 好 的 輸 入 了 。所 以 formatter 就 用 checkbox,edittype 也 是 用 checkbox。在 editoptions 裡 面 ,我 們 可 以 定 義 checkbox 的 值 ,就 像 我 們 在 input type=checkbox value=1 offval=0 一 樣 。但 是 ,jqGrid 的 search form 就 不 支 援 checkbox,所 以 我 們 只 好 乖 乖 的 用 回 select。

下 一 回 我 們 再 看 看 複 雜 一 點 的 欄 位 。

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

3 Responses to jqGrid 實用技巧 (六) 完整的 colModel

  1. newbie2005 says:

    請問在 form edit 後按 submit, 如何傳送 data 到server, 更新記錄.

  2. C.T. Leung says:

    小朋友,上次答完你野,唔該都無聲。乜而家香港人咁無禮貌既咩?

    [ 編按:其實唔一定關禮貌事。喂,大佬,你問緊乜呀?HTML form submit 既 client side 和 server side 係點做,唔好話比我知大佬你唔識呀。如果你真係連呢 D 基本野都唔識,咁真係好惡搞。呢D 基本之中既基本,網上大把人教啦,你去學左先,學完我再教你點樣將果D技巧用係 jqGrid 度。你學完之後應該可以問到 D make sense 既問題既,到時我再答你。知之為知之,不知為不知,千其唔好知 D 唔知 D 呀 ]

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>