web-dev-qa-db-fra.com

jqGrid: Désactive les champs de formulaire lors de l'édition

Je développe actuellement une application Web conçue pour l'administration de distributeurs automatiques, etc. J'ai décidé d'utiliser jQuery, jQuery UI et jqGrid pour ce projet, afin de pouvoir facilement fournir une interface utilisateur géniale et hautement personnalisable.
Malheureusement, la documentationjqGridest assez obsolète et ne couvre pas toutes les fonctionnalités de ce plug-in (car je l’aime vraiment beaucoup, même si la documentation est plutôt pauvre).

Quoi qu'il en soit, assez d'informations de base, je suppose. Allons droit au but:
J'utilise la barre de navigation intégrée à jqGrid pour ajouter, modifier et supprimer des éléments de la grille.
Cela fonctionne comme un charme, à une exception près: certains champs ne peuvent être activés (ou visibles) que lors de l'ajout d'un nouvel élément et non en mode édition (ils doivent être masqués et/ou désactivée).

Exemple:
La société pour laquelle je travaille vend des tours de vente et il en existe plusieurs types (de tailles et de tailles différentes). Lorsqu'une nouvelle tour est ajoutée à un emplacement et entrée dans le système, le type doit être défini. Mais la tour ne change pas comme par magie avec le temps, ce champ ne peut donc pas être modifié ultérieurement.

Est-ce que quelqu'un sait si ce problème peut être accompli en modifiant certains paramètres d'initialisation?
C’est peut-être une option d’édition non documentée (editoptions) ou une option de formulaire (formoptions)?
Ou peut-être avez-vous une solution simple à cela?

J'aimerais entendre votre suggestion/solutions!
Merci =)

jqueryjqgridediting
17
Arno Moonen

Vous pouvez implémenter vos exigences de différentes manières. Par exemple, dans l’événement beforeShowForm, vous pouvez masquer ou afficher le

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

où l'id "nom_tr" est construit à partir du préfixe "tr_" et "Nom" - la propriété de nom de la colonne de la colModel.

UPDATED: Dans la réponse et dans un autre , une autre manière de modifier dynamiquement les propriétés, avant que le montage ne soit initialisé.

UPDATED 2 : Free jqGrid permet de définir editable comme fonction de rappel ou comme "disabled", "hidden" ou "readonly". Voir l'article du wiki . Cela permet de mettre en œuvre plus facilement les mêmes exigences.

36
Oleg

Pour rendre le champ modifiable ou non, voici ce que j’ai fini par coder après avoir cherché une réponse pendant un moment (pour désactiver l’édition sur la modification en ligne, mais l’autoriser sur "Ajouter") et ne pas avoir trouvé la réponse dont j'avais besoin:

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});
            },
8
Alz

Cela fonctionnera avec le jqgrid gratuit, clair et simple:

Cet exemple particulier autorisera l'édition uniquement sous la forme "add":

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;
                            }
0
Robert Smith

Visible mais non éditable:

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

Voici un exemple:

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

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