jqgrid kaskadieren Dropdown-Listen im Popup-Bearbeitungsmodus

Question

Ich habe zwei Dropdown-Listen, die erste wird von den Datenbankwerten gefüllt und die zweite (PriceCode) hängt davon ab, was der Benutzer in der ersten (CurrCd) wählt. Meine Frage ist, wie befülle ich diese zweite Liste dynamisch? Ich versuche es in dataEvents zu tun, habe aber keine Möglichkeit, die zweite Dropdown-Liste im Bearbeitungsmodus zu referenzieren. Gibt es einen korrekten und logischen Weg?

Hier ist mein Code so weit:

grid.jqGrid({ 
      datatype: 'local', 
      jsonReader: als.common.jqgrid.jsonReader('EntityCd'), 
      mtype: 'POST', 
      pager: '#billingPager', 
      loadonce: true, 
      colNames: ['Currency', 'Status', 'Bill Curr', 'Price Code'], 
      colModel: [ 
       { 
           { name: 'DefaultCurr', index: 'DefaultCurr', width: 20, sortable: false }, 
       { name: 'BillStatus', index: 'BillStatus', width: 13, sortable: false }, 
       { 
        name: 'CurrCd', index: 'CurrCd', width: 20, sortable: false, 
        editable: true, 
        edittype: 'select', stype: 'select', 
        editoptions: { 
         dataUrl: als.common.getServerPath() + 'LegalEntitiesAjax/GetCurrencies', 
         dataEvents:[{ 
          type:"change", 
          fn: function (e) { 

           //populate price code list here       
           //below does not work to populate PriceCode 

           $.ajax({ 
            type: 'POST', 
            traditional: true, 
            contentType: 'application/json; charset=utf-8', 
            url: als.common.getServerPath() + 'LegalEntitiesAjax/GetPriceList', 
            data: JSON.stringify({ curcd: this.value }), 
            async: false, 
            success: function (data) {          

             for(i=0; i < data.length; i++) { 
              $('select#PriceCode').append('<option val=\"' + data[i].PriceCode + '">' + data[i].Description + '</option>'); 
             } 


            }, 
            error: function (val) { } 
           }); 


          } 
         }], 

         buildSelect: function (data) { 
          var currSelector = $("<select id='selCurr' />"); 
          $(currSelector).append($("<option/>").val('').text('---Select Currency---')); 
          var currs = JSON.parse(data); 
          $.each(currs, function() { 
           var text = this.CurName; 
           var value = this.CurCode; 
           $(currSelector).append($("<option />").val(value).text(text)); 
          }); 

          return currSelector; 
         } 
        } 
       }, 
       { name: 'PriceCode', index: 'PriceCode', width: 20, sortable: false, editable: true, edittype: 'select', stype: 'select'} 
      ], 
      loadtext: 'Loading...', 
      caption: "Bill Entities", 
      scroll: true, 
      hidegrid: false, 
      height: 300, 
      width: 650, 
      rowNum: 1000, 
      altRows: true, 
      altclass: 'gridAltRowClass', 
      onSelectRow: webview.legalentities.billing.onBillingSelected, 
      loadComplete: function (data) { 
       if (data.length > 0) 
       { 

       } 
       var rowIds = $('#billingGrid').jqGrid('getDataIDs'); 
       $("#billingGrid").jqGrid('setSelection', rowIds[0]); 
      }, 
      rowNum: 1000 
     }); 
     grid.jqGrid('navGrid', '#billingPager', { 
      add: ($("#dev").text() == "True" || $("#globalqc").text() == "True"), 
      edit: false, 
      del: false, 
      search: false, 
      refresh: false 
     }, 
     { // Edit Options 
     }, 
     { // Add Options 
      addCaption: 'Add New Billing Entity', 
      beforeInitData: function (formid) { 

      }, 
      url: als.common.getServerPath() + 'LegalEntitiesAjax/AddBillingEntity/', 
      recreateForm: true, 
      closeAfterAdd: true, 
      reloadAfterSubmit: true 
     }, 
     { // Del Options 
     }); 

Answer 1

The old answer zeigt, wie man die abhängigen wählt implementieren können. Sie verwenden Formularbearbeitung. Somit wird das <select> Element der PriceCode Spalte der Formularbearbeitung die ID = "PriceCode" haben. Sie können $("#PriceCode").html(/*new options*/); verwenden, um die Optionen des <select> Editierfelds der PriceCode Spalte innerhalb des Ereignishandlers der Spalte CurrCd zu ändern.