jqGrid: deshabilitar los campos del formulario al editar
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, para poder 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 excelente complemento (porque realmente me gusta, aunque la documentación es bastante pobre).
De todos modos, supongo que suficiente información general. Vayamos al grano:
uso la barra de navegación integrada en jqGrid para agregar, editar y eliminar elementos de la cuadrícula.
Tengo esto funcionando de maravilla, excepto por una cosa: algunos campos solo pueden estar habilitados (o 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 para la que trabajo vende torres expendedoras y hay varios tipos (diferentes tamaños y cosas) de estas torres. Cuando se agrega una nueva torre a una ubicación y se ingresa al sistema, se debe configurar el tipo. Pero la torre no cambia mágicamente con el tiempo, por lo que es posible que este campo no se edite 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 ( editoptions ) o una opción de formulario ( formoptions ) no documentada?
¿O tal vez tienes una solución sencilla para esto?
¡Me encantaría escuchar tus sugerencias/soluciones!
Gracias =)
Puede implementar sus requisitos de diferentes maneras. Por ejemplo, dentro del beforeShowForm
evento puedes 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 "Name", la propiedad de nombre de la columna del archivo colModel
.
ACTUALIZADO : En la respuesta y en otra se muestra una forma más de cómo las propiedades se pueden cambiar dinámicamente inmediatamente antes de que se inicialice la edición.
ACTUALIZADO 2 : jqGrid gratuito permite definir editable
como función de devolución de llamada o como "disabled"
, "hidden"
o "readonly"
. Vea el artículo wiki . Permite implementar los mismos requisitos más fácilmente.
Para hacer que el campo sea editable o no, esto es lo que terminé codificando después de buscar una respuesta por un tiempo (para deshabilitar la edición en la edición en fila, pero permitirla 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});
},