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 的 寫 法 如 下 ，要 注 意 的 是 ，最 尾 是 不 可 以 有 分 號 (；) 的 。
因 為 dataUrl 要 我 在 後 台 完 成 一 整 個 select element，我 個 人 覺 得 比 較 笨 。所 以 我 自 己 比 較 喜 歡 在 後 台 直 接 製 成 一 個 string 傳 回 前 台 使 用 ( 愚 見 以 為 string 會 比 json object 再 短 一 點 點 )。
如 果 資 料 是 比 較 靜 態 的 ，例 如 全 台 灣 的 縣 市 資 料 ，我 會 在 jqGrid 之 前 ajax 一 次 資 料 ，寫 入 變 數 ，再 在 jqGrid 方 法 時 使 用 這 個 變 數 。如 果 是 這 種 情 況 ，我 們 最 好 在 一 開 始 的 ajax 加 入 async: false 參 數 ，因 為 如 果 ajax 在 jqGrid 開 始 時 還 未 做 完 ，selectString 是 empty 的 。
jQuery
(
"#jqGrid"
)
.jqGrid
(
{
{
name
:
'name'
, edittype
:
'select'
, editoptions
:
{
value
:
selectString
}
}
,
}
)
;
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 的 寫 法 有 很 多 ，每 一 種 寫 法 又 可 以 有 不 同 的 變 化 ，所 以 是 有 許 多 不 同 的 寫 法 可 以 達 成 同 一 目 的 的 ，以 上 只 是 我 自 己 偏 好 的 寫 法 ，而 並 不 是 只 有 這 一 種 寫 法 啊 。
板主，我想請問動態產生下拉選單的問題
但我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”);
以上問題請教，謝謝
哎哎哎，老兄，你還真不是一般的不懂呀。我真心希望你自己可以去讀一下 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() 的分別？
好的，再提供幾點基本資訊。
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，看完就會懂的了。
板主，我想請問動態產生下拉選單的問題
但我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”);
以上問題請教，謝謝