jqgrid的級聯組合框

如何實現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!
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章