Opciones de cuadro de selección dependientes en el formulario de edición de jqGrid

jqGrid le permite crear cuadros de selección dinámicos para editar formularios, donde las opciones dependen del selección realizada en un cuadro de selección relacionado. Esto es útil para escenarios como seleccionar un país y completar las opciones de estado en consecuencia.

Problema: valores de opción incorrectos

Sin embargo, surge un problema al editar un registro con un cuadro de selección de estado completado dinámicamente. Los valores de opción del cuadro de selección de estado comienzan desde 0 en lugar del valor esperado de 5.

Solución: restablecer las opciones de edición y reconstrucción manual

Para resolver este problema, el La clave es comprender que jqGrid usa las opciones de edición solo una vez durante la inicialización. Para completar correctamente el cuadro de selección de estado según el país seleccionado, se deben restablecer las opciones de edición y reconstruir el cuadro de selección manualmente.

Así es como se implementa la solución:

1. Restablecer opciones de edición:

   • Al cargar la página, establezca las opciones de edición para el cuadro de selección de estado en estática valor.

2. Cambio de datos:

   • Cuando el cuadro de selección de país cambie, restablezca las opciones de edición del cuadro de selección de estado al valor estático.

3. Reconstruir cuadro de selección:

   • Basado en el país seleccionado, cree nuevas opciones para el cuadro de selección de estado.
   • Para edición en línea, actualice el cuadro de selección para la fila específica.
   • Para edición de formulario, actualice el cuadro de selección en el formulario de edición .

4. Mantener valores de estado:

   • Después de cambiar el país y reconstruir el estado, seleccione cuadro, asegúrese de que el estado seleccionado se refleje correctamente configurando el valor de opción de edición apropiado.

Fragmento de código:

// Reset the editoptions for the state select box
var resetStatesValues = function () {
    grid.setColProp('State', { editoptions: { value: states}});
};

// Build new options for the state select box based on the selected country
var changeStateSelect = function (countryId, countryElem) {
    var sc = statesOfCountry[countryId];
    var newOptions = 'All'; // If needed
    for (stateId in sc) { newOptions  = ''   states[stateId]   ''; }
    grid.setColProp('State', { editoptions: { value: statesOfCountry[countryId]} });
    if ($(countryElem).is('.FormElement')) {
        // Form editing
        $(countryElem).closest('form.FormGrid').find("select#state.FormElement").html(newOptions);
    } else {
        // Inline editing
        var row = $(countryElem).closest('tr.jqgrow');
        var rowId = row.attr('id');
        $("select#"   rowId   "_State", row[0]).html(newOptions);
    }
};

Conclusión

Al restablecer las opciones de edición, reconstruir el cuadro de selección de estado manualmente y mantener el valor de estado seleccionado, puede asegurarse de que se muestre el formulario de edición en jqGrid. los valores de opción correctos para los cuadros de selección dependientes.