龍之家族

引用網址：http://www.misterngan.com/1736/jqgrid-all-about-date/

用 得 jqGrid，九 成 九 都 有 用 Database。用 得 Database，就 無 法 避 免 會 使 用 到 「日 期 」這 種 資 料 形 態 。今 天 筆 者 就 把 關 於 日 期 的 幾 個 jqGrid 技 巧 介 紹 給 各 讀 者 吧 。

...
colModel :[
 ....
 {name:'po_date',index:'po_date',editable:true,edittype:'text'},
 ....
],
...

假 設 我 們 的 jqGrid 裡 面 有 一 個 叫 po_date 的 column，對 應 Mysql 裡 面 一 個 date 形 態 的 field。Mysql 用 的 日 期 標 準 是 yyyy-mm-dd，所 以 本 篇 亦 全 部 用 這 個 格 式 為 標 準 。上 面 的 colModel 是 完 全 空 白 ，什 麼 也 沒 有 。我 們 看 看 如 何 一 步 步 去 完 善 它 。

jqGrid 的 ColModel 其 實 就 有 一 個 property 叫 datefmt，是 指 明 日 期 格 式 的 。預 設 值 就 是 ISO Date (Y-m-d)，剛 好 乎 合 我 這 個 例 子 的 需 要 ，於 是 我 就 不 用 特 意 去 改 變 它 。不 過 這 個 datefmt 其 實 很 重 要 ，因 為 column sorting 和 validation 都 是 靠 它 。所 以 如 果 你 不 是 用 預 設 值 的 話 ，你 必 須 要 去 設 定 好 它 。

日 期 資 料 ，一 般 多 數 會 用 text input 來 做 輸 入 ，所 以 上 面 的 edittype 就 設 定 為 text。由 於 我 們 使 用 特 定 的 日 期 格 式 ，那 個 長 度 是 固 定 的 ( 10位 文 字 )，所 以 我 們 可 以 加 入 相 關 的 控 制 。

...
colModel :[
 ....
 {name:'po_date',index:'po_date',editable:true,edittype:'text',editable:true, editoptions:{size:10,maxlength:10}},
 ....
],
...

在 這 個 例 子 ，因 為 從 Mysql 拿 出 來 的 日 期 就 很 完 整 ，所 以 是 不 需 要 用 formatter 的 。不 過 有 時 候 ，資 料 庫 的 資 料 並 不 整 齊 ，例 如 沒 有 輸 入 日 期 的 value 全 是 0000-00-00，那 我 們 就 可 以 用 簡 單 的 custom formatter 去 整 理 一 下 。

...
colModel :[
 ....
 {name:'po_date',index:'po_date',editable:true,edittype:'text',editable:true, editoptions:{size:10,maxlength:10},formatter:fixDate},
 ....
],
...
function fixDate(cellvalue, options, rowObject){
 if (cellvalue!='0000-00-00') {
  return cellvalue;
 } else {
  return "";
 }
}
...

 當 然 ，我 們 也 可 以 用 jqGrid 內 建 的 formatter: ‘date’。但 要 注 意 的 是 formatoptions 裡 面 的 預 設 值 適 不 適 用 。簡 單 的 說 ，我 們 至 少 要 看 看 srcformat 和 newformat，預 設 值 是 “Y-m-d” 和 “d/m/Y”。所 以 如 果 我 們 什 麼 都 不 設 定 的 話 ，在 我 上 面 的 例 子 中 ，日 期 就 會 由 2014-12-31 自 動 變 成 31/12/2014。

...
colModel :[
 ....
 {name:'po_date',index:'po_date',editable:true,edittype:'text',editable:true, editoptions:{size:10,maxlength:10},formatter:'date',formatoptions:{srcformat:'Y-m-d',newformat:'Y-m-d'}},
 ....
],
...

在 我 的 例 子 中 ，資 料 庫 的 日 期 格 式 ，和 我 想 顯 示 出 來 的 日 期 格 式 ，都 是 ‘Y-m-d’。但 大 家 不 要 把 這 個 formatoptions 裡 面 的 newformat，和 colModel 裡 面 的   datefmt 搞 亂 了 。datefmt 是 指 定 資 料 庫 拿 回 來 的 日 期 格 式 ( 就 像 srcformat )，newformat 則 是 在 Grid 裡 面 顯 示 的 日 期 格 式 。

然 後 就 是 data validation，這 當 然 就 是 在 editrules 裡 面 設 定 。首 先 當 然 是 {date:true}，它 會 依 據 colModel 裡 面 的 datefmt 來 檢 查 你 輸 入 的 日 期 格 式 。另 外 ，{required:true/false} 就 是 允 不 允 許 輸 入 空 白 。

...
colModel :[
 ....
 {name:'po_date',index:'po_date',editable:true,edittype:'text',editable:true, editoptions:{size:10,maxlength:10},editrules:{date:true,required:true},formatter:'date',formatoptions:{srcformat:'Y-m-d',newformat:'Y-m-d'}},
 ....
],
...

如 果 單 是 要 validate 輸 入 的 是 不 是 日 期 ，內 建 的 editrules 就 很 夠 了 。不 過 如 果 你 想 控 制 可 以 輸 入 日 期 的 範 圍 ，就 要 自 己 寫 條 custom_func 了 。( 內 建 的 minValue / maxValue 只 是 針 對 數 值 的 )

講 到 日 期 輸 入 ，當 然 不 得 不 提 jQuery UI 的 Datepicker。要 在 jqGrid 裡 面 使 用 Datepicker 實 在 是 太 簡 單 不 過 ，只 要 在 editoptions 的 dataInit 設 定 一 條 custom Function。

...
colModel :[
 ....
 {name:'po_date',index:'po_date',editable:true,edittype:'text',editable:true, editoptions:{size:10,maxlength:10,dataInit:getDate},editrules:{date:true,required:true},formatter:'date',formatoptions:{srcformat:'Y-m-d',newformat:'Y-m-d'}},
 ....
],
...
function getDate(el) {
 $(el).datepicker({dateFormat:"yy-mm-dd"});
}
...

以 前 jqGrid 的 documentation 還 有 使 用 datepicker 要 加 setTimeout 的 一 說 ，但 現 在 應 該 沒 有 這 個 需 要 了 。

...
function getDate(el) {
 setTimeout(function() {
  $(el).datepicker({dateFormat:"yy-mm-dd"});
 }, 200);
}
...

大 家 要 注 意 ，datepicker 的 預 設 格 式 是 ‘mm/dd/yy’，所 以 在 我 的 例 子 中 要 把 日 期 格 式 轉 為 ‘yy-mm-dd’。

jqGrid Datepicker

如 果 我 們 想 要 在 form editing 的 add new 裡 面 設 定 日 期 的 預 設 值 ，我 們 可 以 在 afterShowForm event 裡 面 設 定 。下 面 看 看 navGrid method。

...
$("#grid_id").jqGrid('navGrid','#grid_pager',
 {parameters},
 {}, // prmEdit
 {}, // prmAdd
 {}, // prmDel
 {}, // prmSearch
 {}  // prmView
);
...

一 般 所 謂 的 預 設 值 只 會 在 Add New 時 才 有 ，所 以 我 們 要 只 要 修 改 prmAdd 裡 面 的 parameters。

...
$("#grid_id").jqGrid('navGrid','#grid_pager',
 {parameters},
 {}, // prmEdit
 {afterShowForm: function(formid) {
  $('#po_date').val($.datepicker.formatDate('yy-mm-dd', new Date()));
 }}, // prmAdd
 {}, // prmDel
 {}, // prmSearch
 {}  // prmView
);
...

在 form editing 裡 面 ，每 一 個 column 會 自 動 生 成 一 個 和 column name 相 同 的 input，所 以 直 接 用 #po_date 就 可 以 選 擇 我 們 要 的 input。然 後 我 們 再 用 datepicker 來 取 得 一 個 已 經 format 好 的 日 期 。上 例 中 的 預 設 日 期 就 是 「今 天 」。

最 後 ，我 們 也 來 說 一 點 點 search 吧 。日 期 field，多 數 情 況 只 需 要 equal，less than and equal to，greater than and equal to 三 個 就 夠 了 。Searchoptions 也 一 樣 可 以 設 定 dataInit 來 使 用 datepicker 幫 助 輸 入 。Searchrules 也 一 樣 可 以 {date:true} 之 類 的 。

最 後 把 search 也 加 入 colModel 之 後 ，整 體 看 起 來 就 像 如 下 。

...
$("#grid_id").jqGrid({
 ...
 colModel :[
  ....
  {name:'po_date',index:'po_date',editable:true,edittype:'text',editable:true, editoptions:{size:10,maxlength:10,dataInit:getDate},editrules:{date:true,required:true},formatter:'date',formatoptions:{srcformat:'Y-m-d',newformat:'Y-m-d'},search:true, stype:'text',searchoptions:{sopt:['eq','le','ge'],dataInit:getDate},searchrules:{date:true,required:true},align:'center'},
  ....
 ],
 ...
});
...
$("#grid_id").jqGrid('navGrid','#grid_pager',
 {add:true},
 {}, // prmEdit
 {afterShowForm: function(formid) {
  $('#po_date').val($.datepicker.formatDate('yy-mm-dd', new Date()));
 }}, // prmAdd
 {}, // prmDel
 {}, // prmSearch
 {}  // prmView
);
...
function getDate(el) {
 $(el).datepicker({dateFormat:"yy-mm-dd"});
}
...