龍之家族

引用網址：http://www.misterngan.com/987/jqgrid-%E5%AF%A6%E7%94%A8%E6%8A%80%E5%B7%A7-%E5%9B%9B-form-edit/

好 不 容 易 ，終 於 寫 到 jqGrid 的 Form Edit。我 們 再 一 次 回 到 功 能 強 大 的 colModel。

...
colModel :[
....
{name:'name',index:'name',editable:true,edittype:'text',editoptions:{size:50,maxlength:100},editrules:{required:true}},
....
],
...

在 colModel 裡 面 ，跟 Form Edit 有 直 接 關 係 的 参 數 有 4 個 – editable、edittype、editoption 和 editrules。

editable，顧 名 思 義 ，就 是 設 定 這 個 欄 位 能 不 能 修 改 。預 設 值 是 false。如 果 是 editable:flase 的 話 ，該 欄 位 是 不 會 出 現 在 Edit Form 裡 面 的 。

edittype，就 是 Edit Form 裡 面 的 <input> Tag 的 種 類 。edittype 的 值 可 以 是  text，textarea，select，checkbox，password，button，image，file 和 custom。就 是 相 應 的 ，<input type=text>，<textarea></textarea>，<select></select> 等 等 在 表 單 裡 面 使 用 的 輸 入 項 。

editoptions，就 是 <input> Tag 裡 面 ，額 外 的  attributes。這 些 attributes 會 跟 據 edittype 而 有 所 不 同 。例 如 上 面 的 例 子 ，edittype 是 text，所 以 就 相 應 的 加 入 size 和 maxlength 參 數 。再 看 下 面 的 另 一 例 。

...
colModel :[
....
{name:'description',index:'description',editable:true,edittype:'textarea',editoptions:{rows:"5",cols:"50"},editrules:{required:true}},
....
],
...

由 於 edittype 是 textarea，所 以 size 和 maxlenght 都 不 會 生 效 。於 是 我 們 相 應 的 加 入 rows 和 cols 這 兩 個 textarea 相 關 的 參 數 。editoptions 也 是 設 定 select 的 option 的 地 方 。

...
colModel :[
....
{name:'enable',index:'enable',editable:true,edittype:'select',editoptions:{value:"0:正 常 ;1:停 用 "}},
....
],
...

另 外 ，editoptions 也 可 以 使 用 dataInit function（就 像 searchoptions 一 樣 ）， 加 入 jQuery UI。在 下 例 中 我 就 使 用 了 jQuery UI 的 datepicker。

...
colModel :[
....
{name:'date',index:'date',editable:true,edittype:'text',editoptions:{dataInit:datePick,size:10,maxlength:10},editrules:{required:true,date:true}},
....
],
...
...
...
function datePick(elem){
$(elem).datepicker({ dateFormat: "yy-mm-dd" });
}
...

至 於 最 後 的 editrules，就 是 做 data validation 的 。jqGrid 本 身 已 經 包 含 了 很 多 常 用 的 data validation，令 開 發 者 節 省 了 很 多 時 間 。例 如 上 例 的 的 editrules:{required:true,date:true}，意 思 就 是 「不 得 留 空 」和 「必 須 是 日 期 」。jqGrid 的 editrules 還 有  number，integer，minValue，maxValue，email，url，time，custom。

Data Validation

而 其 中 的 custom ，就 是 讓 開 發 者 在 jqGrid 本 來 的 data validation 不 夠 用 的 時 候 ，可 以 簡 易 的 新 增 自 定 義 的 data validation。請 看 下 例 。

...
colModel :[
....
{name:'pass',index:'pass',editable:true,edittype:"password",editrules:{required:true,custom:true, custom_func:checkPassword}},
....
],
...
...
function checkPassword(value, colname){
if (value.length < 8)
return [false,"Password too short"];
else
return [true,""];
}
...

這 是 一 個 使 用 者 密 碼 的 欄 位 ，筆 者 希 望 使 用 者 輸 入 的 密 碼 至 少 要 有 8 個 位 。首 先 ，我 們 在 editrules 加 入 custom:true，然 後 再 加 入 一 條 自 定 義 的 function，custom_func:　checkPassword。自 定 義 function 的 參 數 value，就 是 使 用 者 輸 入 的 數 值 了 。value.length 就 是 value 字 串 的 長 度 ，少 於 8 的 話 ，我 們 就 傳 回 false，以 及 錯 誤 訊 息 ，這 個 錯 誤 訊 息 是 會 在 Edit Form 上 面 顯 示 給 使 用 者 的 。如 果 檢 查 之 後 是 正 確 的 話 ，就 傳 回 true。

Password too short

好 了 ，現 在 Form View，Form Edit，Form Search 我 們 都 獨 立 的 學 了 一 遍 。下 一 回 ，我 們 就 試 作 一 些 複 雜 一 點 的 欄 位 ，看 看 同 一 個 欄 位 的 colModel 在 夾 雜 了 View ，Edit，Search 等 等 之 後 會 變 成 什 麼 樣 子 。