Personalizar el cuadro de diálogo Agregar/Editar en jqGrid

Question

Lo siento, no puedo publicar imágenes, soy demasiado nuevo.

En jqGrid agregue/edite los diálogos Quisiera cargar una lista de elementos seleccionables basados ​​en una selección hecha antes. En la imagen anterior, la selección del valor debe cargarse según el valor elegido en la selección de criterios. Creo que la ruta a seguir es usar la columna de datos en el objeto editoptions pero tengo problemas en ese sentido. El primer problema que fue preocupante se basó en la documentación here, no parece que haya un evento disponible para disparar cuando cambia el valor de los criterios que me permitirán actualizar la lista de valores.

También estoy confundido sobre cómo se deben devolver los datos de la solicitud de AJAX. En la documentación, dice:

Configuración del parámetro editoptions dataUrl El parámetro editoptions dataUrl es válido solo para el elemento de tipo de edición: select. El parámetro dataUrl representa la url desde donde se debe obtener el elemento de selección html. Cuando se establece esta opción, el elemento se completará con los valores de la solicitud AJAX. Los datos deben ser un elemento de selección HTML válido con las opciones deseadas"

¿Esto significa que se necesita para generar el html y volver esto como parte de la respuesta? Anteriormente había estado pasando todos mis datos utilizando JSON .

Answer 1

jqGrid no tiene soporte simple selecciona dependientes en el editoptions. Así que para poner en práctica es uno tiene que usar change evento en el principal, seleccione para actualizar manualmente la lista de opciones de la segunda (dependiente) seleccione.

En the demo, encontrará cómo puede implementar selecciones dependientes. Utilicé en la demo 'l tipo de datos 'ocal' y así configurar value propiedad del editoptions en lugar de dataUrl, pero el esquema principal de lo que debe hacerse sigue siendo el mismo. Además, en la demostración uso no solo la edición de formularios, sino también la edición en línea. El código funciona en ambos casos. Debido a que jqGrid no admite la edición local en el modo de edición de formularios, el envío de formularios no funciona. Podría utilizar los trucos que describí here, pero el código será mucho más largo y contendrá muchas cosas que están lejos de ser su pregunta principal. Así que decidí publicar el código en el formulario donde el envío no funciona.

A continuación encontrará el código de la demo:

var countries = { '1': 'US', '2': 'UK' }, 
    states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' }, 
    statesOfUS = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' }, 
    statesOfUK = { '5': 'London', '6': 'Oxford' }, 
    // the next maps contries by ids to states 
    statesOfCountry = { '1': statesOfUS, '2': statesOfUK }, 
    mydata = [ 
     { id: '0', Country: '1', State: '1', Name: "Louise Fletcher" }, 
     { id: '1', Country: '1', State: '3', Name: "Jim Morrison" }, 
     { id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" }, 
     { id: '3', Country: '2', State: '6', Name: "Oscar Wilde" } 
    ], 
    lastSel = -1, 
    grid = $("#list"), 
    resetStatesValues = function() { 
     // set 'value' property of the editoptions to initial state 
     grid.jqGrid('setColProp', 'State', { editoptions: { value: states} }); 
    }; 

grid.jqGrid({ 
    data: mydata, 
    datatype: 'local', 
    colModel: [ 
     { name: 'Name', width: 200 }, 
     { 
      name: 'Country', 
      width: 100, 
      editable: true, 
      formatter: 'select', 
      edittype: 'select', 
      editoptions: { 
       value: countries, 
       dataInit: function (elem) { 
        var v = $(elem).val(); 
        // to have short list of options which corresponds to the country 
        // from the row we have to change temporary the column property 
        grid.jqGrid('setColProp', 'State', { editoptions: { value: statesOfCountry[v]} }); 
       }, 
       dataEvents: [ 
        { 
         type: 'change', 
         fn: function (e) { 
          // build 'State' options based on the selected 'Country' value 
          var v = $(e.target).val(), 
           sc = statesOfCountry[v], 
           newOptions = '', 
           stateId, 
           form, 
           row; 
          for (stateId in sc) { 
           if (sc.hasOwnProperty(stateId)) { 
            newOptions += '<option role="option" value="' + stateId + '">' + 
             states[stateId] + '</option>'; 
           } 
          } 

          resetStatesValues(); 

          // populate the subset of contries 
          if ($(e.target).is('.FormElement')) { 
           // form editing 
           form = $(e.target).closest('form.FormGrid'); 
           $("select#State.FormElement", form[0]).html(newOptions); 
          } else { 
           // inline editing 
           row = $(e.target).closest('tr.jqgrow'); 
           $("select#" + $.jgrid.jqID(row.attr('id')) + "_State", row[0]).html(newOptions); 
          } 
         } 
        } 
       ] 
      } 
     }, 
     { 
      name: 'State', 
      width: 100, 
      editable: true, 
      formatter: 'select', 
      edittype: 'select', 
      editoptions: { value: states } 
     } 
    ], 
    onSelectRow: function (id) { 
     if (id && id !== lastSel) { 
      if (lastSel !== -1) { 
       resetStatesValues(); 
       grid.jqGrid('restoreRow', lastSel); 
      } 
      lastSel = id; 
     } 
    }, 
    ondblClickRow: function (id) { 
     if (id && id !== lastSel) { 
      grid.jqGrid('restoreRow', lastSel); 
      lastSel = id; 
     } 
     resetStatesValues(); 
     grid.jqGrid('editRow', id, true, null, null, 'clientArray', null, 
      function() { // aftersavefunc 
       resetStatesValues(); 
      }); 
     return; 
    }, 
    editurl: 'clientArray', 
    sortname: 'Name', 
    ignoreCase: true, 
    height: '100%', 
    viewrecords: true, 
    rownumbers: true, 
    sortorder: "desc", 
    pager: '#pager', 
    caption: "Demonstrate dependend select/dropdown lists (edit on double-click)" 
}).jqGrid('navGrid', '#pager', { edit: true, add: true, del: false, search: false, refresh: true }, 
    { // edit options 
     recreateForm: true, 
     viewPagerButtons: false, 
     onClose: function() { 
      resetStatesValues(); 
     } 
    }, 
    { // add options 
     recreateForm: true, 
     viewPagerButtons: false, 
     onClose: function() { 
      resetStatesValues(); 
     } 
    }); 

ACTUALIZADO: Consulte "Actualización 2" parte de the answer para la versión más reciente en la demo.