jquery - example - jqGrid: deshabilita los campos de formulario al editar

jqgrid search example

Question

Actualmente estoy desarrollando una aplicación web diseñada para la administración de máquinas expendedoras y similares. 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, la documentación de jqGrid está bastante desactualizada y no cubre todas las características de este gran complemento (porque realmente me gusta, aunque la documentación es bastante pobre).

De todos modos, suficiente información de fondo, supongo. Vayamos 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) cuando se agrega un nuevo elemento y no cuando está en modo de edición (deben estar ocultos y / o deshabilitados).

Ejemplo:
La compañía para la que trabajo vende torres expendedoras y hay varios tipos (diferentes tamaños y demás) de estas torres. Cuando se agrega una nueva torre a una ubicación y se ingresa en el sistema, se debe establecer 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 tu sugerencia / soluciones!
Gracias =)

Answer 1

Para que el campo sea editable o no, esto es lo que terminé de codificar después de buscar una respuesta por un tiempo (para deshabilitar la edición en la edición en la fila, pero permitirlo en ''Agregar'') y no encontrar la respuesta que 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});
},

Answer 2

Aquí hay un ejemplo:

http://www.ok-soft-gmbh.com/jqGrid/CustomFormEdit.htm

 beforeShowForm: function(form) {
$(''#tr_Name'', form).hide();
}

Answer 3

Visible pero no editable:

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

Answer 4

Esto funcionará con el jqgrid gratuito, simple y llanamente:

Este ejemplo particular permitirá editar solo en el formulario "agregar":

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;
}

Answer 5

Puede implementar sus requisitos de diferentes maneras. Por ejemplo, dentro del evento beforeShowForm puede ocultar o mostrar el

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 del nombre de la columna del colModel .

ACTUALIZADO : en la respuesta y en otro se muestran de una forma más cómo las propiedades se pueden cambiar dinámicamente inmediatamente antes de que se inicie la edición.

ACTUALIZADO 2 : jqGrid gratuito permite definir funciones editable como de devolución de llamada o como "disabled" , "hidden" o "readonly" . Vea el artículo de la wiki . Permite implementar los mismos requisitos más fácil.