2010-08-04 51 views
17

Actualmente estoy desarrollando una aplicación web diseñada para la administración de máquinas expendedoras y tal. Decidí usar jQuery, jQuery UI y jqGrid para este proyecto, por lo que puedo proporcionar fácilmente una interfaz de usuario excelente y altamente personalizable.
Desafortunadamente, el jqGrid documentation está bastante desactualizado y no cubre todas las características de este gran complemento (porque realmente me gusta, aunque la documentación es bastante pobre).jqGrid: Inhabilitar campos de formulario al editar

De todos modos, suficiente información de fondo, supongo. Vamos al grano:
Utilizo la barra de navegación que está incorporada en jqGrid para agregar, editar y eliminar elementos de la grilla.
Esto funciona como un amuleto, excepto por una cosa: algunos campos solo pueden habilitarse (o ser visibles) al agregar un nuevo elemento y no cuando están en modo de edición (deben estar ocultos y/o deshabilitados).

Ejemplo:
La empresa donde trabajo para vende torres expendedoras y hay varios tipos diferentes ( tamaños y esas cosas) de estas torres. Cuando se agrega una nueva torre a una ubicación y ingresado en el sistema, se debe configurar el tipo . Pero la torre no cambia mágicamente con el tiempo, por lo que este campo no se puede editar más adelante.

¿Alguien sabe si este comportamiento se puede lograr cambiando algunos parámetros de inicialización?
Quizás sea una opción de edición no documentada (editoptions) o form-option (formoptions)?
¿O tal vez tienes una solución simple para esto?

¡Me encantaría escuchar su sugerencia/soluciones!
Gracias =)

Respuesta

36

Puede implementar sus requisitos de diferentes maneras. Por ejemplo, en el interior de beforeShowForm caso puede ocultar o mostrar la

jQuery("#list").jqGrid({ 
    colModel: [ 
     { name: 'Name', width: 200, editable: true }, 
    //... 

}).jqGrid('navGrid','#pager', { edit: true, add: true, del: false}, 
      { // edit option 
       beforeShowForm: function(form) { $('#tr_Name', form).hide(); } 
      }, 
      { // add option 
       beforeShowForm: function(form) { $('#tr_Name', form).show(); } 
      }); 

donde el id "tr_Name" se construye a partir del prefijo "tr_" y "Nombre" - la propiedad nombre de la columna de la colModel.

ACTUALIZADO: En the answer y en another one se muestran de una manera más cómo las propiedades se pueden cambiar dinámicamente inmediatamente antes se iniciará la edición.

ACTUALIZADO 2: Free jqGrid permite definir editable como función de devolución de llamada o como "disabled", "hidden" o "readonly". Ver the wiki article. Permite implementar los mismos requisitos más fácil.

+0

Gracias, funciona a la perfección! –

+0

Gracias por la información. Además, si desea ocultar la columna en la cuadrícula pero mostrar en forma de agregar o editar, utilice hidden: true en colModel y en beforeShowForm use el método show(). – Tareq

+0

@Tareq: ¡De nada! – Oleg

8

para que el campo editable o no, esto es lo que terminé de codificación después de buscar una respuesta para un tiempo (para desactivar la edición de encendido en fila edición, pero permita que en 'Añadir') y no encontrar la respuesta necesitaba:

colModel :[ 
    {name:'id', index:'id', editable:false, ... 

    }).navGrid("#pager",{edit:false,add:true,del:false,search:false,refresh:true}, 
     {}, // edit 
     { 
      beforeInitData: function(formid) { 
       $("#list").jqGrid('setColProp','id',{editable:true}); 
      }, 
      afterShowForm: function (formid) { 
       $("#list").jqGrid('setColProp','id',{editable:false}); 
      }, 
0

visible pero no editable:

{ // edit option 
    beforeShowForm: function(form) { 
     $('#col_name', form).attr("disabled", true); 
    } 
} 
0

Esto funciona con la jqGrid libre, así de simple:

Este ejemplo particular permitirá editar sólo en la forma de "añadir":

editable: function (options) { 
          // Allow edit only for "add" not for "edit" 
          if (options.mode === "addForm") 
          { 
           return true; 
          } 
          else if (options.mode === "editForm") 
          { 
           return false; 
          } 
          else 
          { 
           return false; 
          } 
Cuestiones relacionadas