如何實現jqgrid的級聯組合框呢?就是類似:先選中"國家"組合框、"城市"組合框的內容根據"國家"組合框的內容而改變。在網上查了一下、有人提出來過、但無人解決。想了半天終於解決了。
基本思路:
1 國家對應的城市肯定要用一個變量保存起來。類如:
var citys={
{'contry':'china',
'city':'beijing'
},
{'contry':'china',
'city':'shanghai'
},
{'contry':'china',
'city':'lanjing'
},
{'contry':'americal',
'city':'newyouk'
},
{'contry':'americal',
'city':'warshonton'
}
}
2 jqgrid點擊城市單元格時、肯定要先根據columnModel中的editoptions中的value屬性(也就是select的選項)生成select組合框。要在select控件生成之前改變editoptions的value屬性、select中的選項值也就改變了。用調試跟蹤的方法、我發現這個功能在jqgrid中的editCell函數中。修改這個函數
原來的函數:
$.jgrid.extend({
editCell : function (iRow,iCol, ed){
return this.each(function (){
var $t = this, nm, tmp,cc, cm;
if (!$t.grid || $t.p.cellEdit !== true|| ) {return;}
改爲:
$.jgrid.extend({
editCell : function (iRow,iCol, ed){
return this.each(function (){
var $t = this, nm, tmp,cc, cm,flg;
if (beforeFocus !='undefind'){
flg=beforeFocus(iRow,iCol);
}if (!$t.grid || $t.p.cellEdit !== true|| !flg
) {return;}
說明:
1 增加了一個flg變量、用來保存自定義函數beforeFocus的返回值、假如沒有選中國家
則editCell函數返回、城市組合框就不能輸入了
2修改colunmModel的任務就交給beforeFocus函數了。
再來看beforeFocus函數
function beforeFocus(iRow,iCol){
if (iCol==2){
var ids=$("#gridTable").getDataIDs();
//取得選擇行的數據
var rdata=$("#gridTable").getRowData (ids[iRow])[0];
//取得選擇的國家值
var v_country=rdata.country
if (v_country==""){
alert("請首先輸入國家!")
return false;
}
//生成columnModel的editoptions的value的字符串
var selectStr=""
$.each(citys,function(i,rowdt){
if (rowdt.country==v_country){
selectStr+=";"+rowdt.city;
}
});
//設置columnModel
$("#gridTable").setColProp("city",{editoptions:{value:selectStr.substr(1)}});
}
return true;
}
測試ok!
jqgrid的級聯組合框
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
jqGrid參數-----colModel的設置
伊佐奈美須八尾
2018-08-27 14:03:12
jqgrid前臺數據顯示問題原因和解決方案
macalzheng
2018-08-27 05:01:53
java 反射異常和 找不action的解決方案
macalzheng
2018-08-27 05:01:50
jqgrid設置rowid:用唯一列代替行號
ksy
2018-08-26 03:23:52
jqGrid增刪查改彈出頁面一閃就自動關閉
lyon0098
2018-08-26 03:14:04
jqGrid一些使用
orzma
2018-08-25 14:52:53
jqGrid表格之subGrid
feverlook
2018-08-25 08:38:42
jqGrid表格之自定義subGrid
feverlook
2018-08-25 08:38:42
利用jqGrid裏的formatter對字體加粗和更改顏色
Little_naive
2018-08-25 03:57:57
jqGrid置頂所有選中行
解夕
2018-08-24 14:07:39
jqGrid的使用方法(編輯,刪除,更新,新增)
lfhy1987
2018-08-24 12:17:35
Struts2與jqGrid的參數傳遞
守护小公主
2018-08-24 09:31:49
jqGrid 學習筆記整理——進階篇(二)
XeonMic
2018-08-24 06:57:48
jqGrid 學習筆記整理——終極篇(一)
XeonMic
2018-08-24 06:57:48
jqGrid 學習筆記整理——基礎篇
XeonMic
2018-08-24 06:57:46