jqGrid 實用技巧 (十七) 動態的 edittype : select

讀 者 kate 留 言 詢 問 關 於 動 態 select 的 寫 法 ,現 詳 述 如 下 :

1
2
3
4
5
6
7
...
colModel :[
....
{name:'name',index:'name',editable:true,edittype:'select',editoptions:{value:"1:Yes;2:No"}},
....
],
...

根 據 documentation,edittype: select 有 三 種 寫 法 ,都 是 寫 在 editoptions 裡 面 ,分 別 是 :
1. value 是 一 個 string;
2. value 是 一 個 object;
3. 使 用 dataUrl 參 數 。

string 的 寫 法 如 下 ,要 注 意 的 是 ,最 尾 是 不 可 以 有 分 號 (;) 的 。

1
2
3
...
..., editoptions: { value: "FE:FedEx; IN:InTime; TN:TNT" }...
...

我 們 當 然 亦 可 以 把 這 個 string 變 成 一 個 變 數 。

1
2
3
4
5
6
...
var selectString = "FE:FedEx; IN:InTime; TN:TNT";
...
...
..., editoptions: { value: selectString }...
...

Object 的 寫 法 也 差 不 多 。

1
2
3
...
..., editoptions: { value: {1:'One',2:'Two'} }...
...

Object 當 然 也 一 樣 可 以 寫 成 變 數 。

1
2
3
4
5
6
...
var selectObject = {1:'One',2:'Two'};
...
...
..., editoptions: { value: selectObject }...
...

dataUrl 就 比 較 麻 煩 ,因 為 使 用 datUrl 要 傳 回 的 ,必 須 是 一 個 完 整 的 select ( html element ),例 如 :

1
2
3
4
<select> 
<option value='1'>One</option> 
<option value='2'>Two</option> 
</select>

因 為 dataUrl 要 我 在 後 台 完 成 一 整 個 select element,我 個 人 覺 得 比 較 笨 。所 以 我 自 己 比 較 喜 歡 在 後 台 直 接 製 成 一 個 string 傳 回 前 台 使 用 ( 愚 見 以 為 string 會 比 json object 再 短 一 點 點 )。

如 果 資 料 是 比 較 靜 態 的 ,例 如 全 台 灣 的 縣 市 資 料 ,我 會 在 jqGrid 之 前 ajax 一 次 資 料 ,寫 入 變 數 ,再 在 jqGrid 方 法 時 使 用 這 個 變 數 。如 果 是 這 種 情 況 ,我 們 最 好 在 一 開 始 的 ajax 加 入 async: false 參 數 ,因 為 如 果 ajax 在 jqGrid 開 始 時 還 未 做 完 ,selectString 是 empty 的 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
...
var selectString = "";
...
$.ajax({
   async: false,
   url: "load/load_select.php"
}).done(function( data ) {
   selectString = data;
});
...
...
jQuery("#jqGrid").jqGrid({
...
{name:'name', edittype:'select', editoptions: {value: selectString}},
...
});
...

而 如 果 資 料 是 非 常 動 態 的 ,要 在 jqGrid 生 成 後 ,再 去 改 變 select 的 options,我 們 可 以 用 jqGrid 的 setColProp 方 法 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
...
jQuery("#jqGrid").jqGrid({
...
{name:'name', edittype:'select', editoptions: {}},
...
});
...
...
function loadSelect() {
$.ajax({
   url: "load/load_select.php"
}).done(function( data ) {
   $('#jqGrid').setColProp('name',{editoptions:{value:data}}).trigger("reloadGrid");
   $('#jqGrid').setColProp('name',{searchoptions:{sopt:['eq'],value:data}}).trigger("reloadGrid");
});
}
...

你 可 以 在 任 何 有 需 要 的 時 候 執 行 loadSelect function 去 更 新 jqGrid 的 select options。例 如 可 以 在 loadComplete 又 或 者 gridComplete 時 執 行 一 次 。又 或 者 ,在 每 次 你 更 新 完 name 資 料 時 執 行 一 次 。

要 注 意 ,因 為 我 的 php 傳 回 的 就 是 一 個 string,不 用 stringify 等 處 理 就 可 以 直 接 使 用 ,很 方 便 吧 ?

你 可 以 見 到 ,select 的 寫 法 有 很 多 ,每 一 種 寫 法 又 可 以 有 不 同 的 變 化 ,所 以 是 有 許 多 不 同 的 寫 法 可 以 達 成 同 一 目 的 的 ,以 上 只 是 我 自 己 偏 好 的 寫 法 ,而 並 不 是 只 有 這 一 種 寫 法 啊 。

 

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

This entry was posted in jqGrid and tagged , , . Bookmark the permalink.

5 Responses to jqGrid 實用技巧 (十七) 動態的 edittype : select

  1. kate says:

    板主,我想請問動態產生下拉選單的問題
    但我debugger;時都沒有錯誤,但仍然不work,想請問,是不是觸發的時機不對?

    我想要做這種效果,就像javaScript裡的兩個互動式選單
    選單一 onChange時,依據選單一的option來決定選單二的menu

    我思考的方法:
    在jqGrid產生前,我都先準備好選單二的Object了,它是廣域變數‧
    當選單一onChange時,呼叫roadIdmenu function,送入選單一的值‧
    在roadIdmenu function裡判斷後,決定選單二的menu,用reloadGrid的方式把menu放進jqGrid‧ [可是這方法好像不work,因為addForm的畫面,選單二沒有改變]

    又想,是不是應該在afterShowForm裡觸發reloadGrid,但好像也沒用

    {label:’選單一’,name:’roadId’,index:’roadId’,width:25,sorttype:’text’,align:’left’,
       editable:true,edittype:’select’,editoptions:{
      value:{選項一:’選項一’,選項二:’選項二’},
    dataEvents: [{type:’change’,fn:function(e){roadIdmenu(this.value); }}]},
    formatter:’select’,search:true,stype:’select’,searchrules:{required:true},
    searchoptions:{value:{選項一:’選項一’,選項二:’選項二’},sopt:[‘eq’]}},

    {label:’選單二’,name:’busId’,index:’busId’,width:25,sorttype:’text’,align:’left’,
    editable:true,edittype:’select’,editrules:{required:true},
    search:true,stype:’text’,searchrules:{required:true}}

    function roadIdmenu(roadIdValue){
     有取到選單一的值了
     jQuery(‘#masterGrid’).setColProp(‘busId’,{editoptions:{value:busJson}}).trigger(“reloadGrid”);
    }

    以上問題請教,謝謝

    • C.T. Leung says:

      哎哎哎,老兄,你還真不是一般的不懂呀。我真心希望你自己可以去讀一下 jqGrid 非常詳盡的 documentation,也去看一下人家數以百計那麼多的 demo。而且,jquery 也明顯應該惡補一下。我絕對不是說笑,你問的問題,和你給出的程式碼 ( 不止這一題,也包括之前的幾題 ),都有一些很根本性的錯誤,曝露了你對 jquery 和 jqgrid 異常的不理解。

      首先,你要問問自己,column model 裡面 edittype: select 究竟是幹什麼用的?標準答案:那是用於生成 form editing 的那張 form 的。所以,當然就唔可能用於動態改變 from 裡面的 elements 了。不管你做多少次 setColProp 和 reloadGrid,都是不會改變一張已經生成好的 form 裡面的東西的。

      要在 form 生成之後去改變裡面的 elements,jqGrid 裡面是沒有任何 method 的,因為,你只要用回最基本的 jquery 就可以了。這次,我就不給你完整的答案了,我反而要反問你幾個簡單問題,如果你能回答,你就可以解決到你的問題了。

      1. 在你的 form edit 和 form add 裡面,你的「選單一」和「選單一」兩個 select elements,它們的 id 究竟是什麼?
      2. 如何用 jquery 去「增加」和「刪除」select elements 的 options?
      3. 如何用一個 select 的 onChange event 去改變另一個 select elements?
      4. jquery 裡面,on(), live(), delegate() 的分別?

  2. kate says:

    謝謝板主
    我對jquery真的不懂,看來不能這樣邊做邊學
    你說的2-4題,我真的不會也
    我來K一下

    • C.T. Leung says:

      好的,再提供幾點基本資訊。

      1. 怎麼說也要學一點點 javascript,因為,jQuery 就是用 javascript 寫出來的,所以 javascript 裡面的某些部分,例如 variable, array, object, function, flow control 等等等等,都是非常必要的。介紹一本非常好睇的書給你,http://eloquentjavascript.net/。

      2. jqGrid 就是用 jQuery 寫出來的,這一類東西就叫 jQuery plugin。如果你不懂 jQuery,基本上就不會懂 jQuery 寫出來的 plugin。所以,jQuery 你是必須要搞懂的,搞懂了 jQuery,然後才學 jqGrid,這次序不能倒轉。jQuery 入門的書很多,隨便看一本就夠用,不是什麼艱難的東西。(你可以想像,jQuery 就是簡單了 10 倍,好用了 10 倍的 javascript,所以如果這個也搞不懂,就真的是 !#$@#%%Y#&%^ )

      3. 學 jqGrid 沒有捷徑,就是看完所有 jqGrid 官方的 documentation 和 demo,看完就會懂的了。

  3. kate says:

    非常感謝板主提供這麼多資訊

Leave a Reply

Your email address will not be published. Required fields are marked *