jqGrid의 edittype : "select"의 editoptions 값을 변경할 수 있습니까?

Question

jqGrid 3.8.1을 사용하고 있습니다. 나는 다른 콤보 박스의 선택된 값을 기반으로 콤보 박스의 풀다운 값을 변경하고 싶다. 그래서 editoptions:value을 edittype:"select"으로 변경하는 방법을 모색 중입니다.

다음은 샘플있는 jqGrid 코드입니다 :

<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%> 
<script type="text/javascript" src="<c:url value="/js/jquery/grid.locale-ja.js" />" charset="UTF-8"></script> 
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery/ui.jqgrid.css" />"/> 
<script src="<c:url value="/js/jquery/jquery.jqGrid.min.js" />" type="text/javascript"></script> 
<table id="rowed5"></table> 
<script type="text/javascript" charset="utf-8"> 
var lastsel2; 
$("#rowed5").jqGrid({ 
    datatype: "local", 
    height: 250, 
    colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'], 
    colModel:[ 
     {name:'id',index:'id', width:90, sorttype:"int", editable: true}, 
     {name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}}, 
     {name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}}, 
     {name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX;AR1:ARAMEX123456789"}},  
     {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}  
    ], 
    caption: "Input Types", 
    resizeStop: function (newwidth, index) { 
     var selectedRowId = $("#rowed5").getGridParam('selrow'); 
     if(selectedRowId) { 
      //resize combobox proportionate to column size 
      var selectElement = $('[id="' + selectedRowId + '_ship"][role="select"]'); 
      if(selectElement.length > 0){ 
       $(selectElement).width(newwidth); 
      } 
     } 
    } 
    , 
    onSelectRow: function(id){ 
     if(id && id!==lastsel2){ 
      //$(this).saveRow(lastsel2, true); 
      $(this).restoreRow(lastsel2); 
      $(this).editRow(id,true); 

      lastsel2=id; 

      $(this).scroll(); 

      //resize combobox proportionate to column size 
      var rowSelectElements = $('[id^="' + id + '_"][role="select"]'); 
      if(rowSelectElements.length > 0) { 
       $(rowSelectElements).each(function(index, element){ 
        var name = $(element).attr('name'); 
        var columnElement = $('#rowed5_' + name); 
        if(columnElement.length > 0) { 
         var columnWidth = $(columnElement).width(); 
         $(element).width(columnWidth); 
        } 
       }); 
      } 
     } 
    } 
}); 
var mydata2 = [ 
     {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"}, 
     {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"}, 
     {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"}, 
     {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX123456789"}, 
     {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"}, 
     {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"}, 
     {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"}, 
     {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"}, 
     {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"} 
     ]; 
for(var i=0;i < mydata2.length;i++) { 
$("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]); 
} 
</script> 

시나리오 :

1. 모든 ship이 초기로드로 표시됩니다.
2. Yes으로 변경하면 은 FedEx, TNT 만 표시합니다.
3. No으로 변경하면 InTime, ARAMEX, ARAMEX123456789 만 표시됩니다.

옵션을 어떻게 바꿀 수 있습니까?

Answer 1

시행 착오로 해결했습니다. 그것을 공유하고 싶다면 아래의 스 니펫을 참조하십시오. 변경 사항은 onSelectRow 함수에 있습니다.

onSelectRow: function(id){ 
    if(id && id!==lastsel2){ 
     //$(this).saveRow(lastsel2, true); 
     $(this).restoreRow(lastsel2); 

     // get the selected stock column value before the editRow 
     var stockValue = $("#rowed5").jqGrid('getCell', id, 'stock'); 
     if(stockValue == 'Yes') { 
      $("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'FE:FedEx;TN:TNT'} }); 
     } else if(stockValue == 'No') { 
      $("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'IN:InTime;AR:ARAMEX;AR1:ARAMEX123456789'} }); 
     } 

     $(this).editRow(id,true); 

     lastsel2=id; 

     $(this).scroll(); 

     //resize combobox proportionate to column size 
     var rowSelectElements = $('[id^="' + id + '_"][role="select"]'); 
     if(rowSelectElements.length > 0) { 
      $(rowSelectElements).each(function(index, element){ 
       var name = $(element).attr('name'); 
       var columnElement = $('#rowed5_' + name); 
       if(columnElement.length > 0) { 
        var columnWidth = $(columnElement).width(); 
        $(element).width(columnWidth); 
       } 
      }); 
     } 
    } 
}