54 votes

Colonnes cachées dans jqGrid

Existe-t-il un moyen de masquer une colonne dans un tableau jqGrid, mais de la faire apparaître en lecture seule lorsque la ligne est modifiée dans la boîte de dialogue modale de l'éditeur de formulaire ?

79voto

Bobby Borszich Points 4424

Cette fonctionnalité est intégrée à jqGrid.

configurez votre fonction de grille comme suit.

$('#myGrid').jqGrid({
   ...
   colNames: ['Manager', 'Name', 'HiddenSalary'],
   colModel: [               
               { name: 'Manager', editable: true },
               { name: 'Price', editable: true },
               { name: 'HiddenSalary', hidden: true , editable: true, 
                  editrules: {edithidden:true} 
               }
             ],
   ...
};

D'autres règles de modification peuvent être appliquées, mais cette configuration de base permet de masquer le salaire du manager dans la grille, mais autorise la modification lorsque le formulaire de modification est affiché.

38voto

chris Points 2186

Je veux juste m'étendre sur reine3 Si l'on en croit la suggestion de l'auteur, il suffit d'appliquer ce qui suit :

editoptions: { 
              dataInit: function(element) { 
                          $(element).attr("readonly", "readonly"); 
                        } 
             }

Scénario 1 :

  • Le champ doit être visible dans la grille
  • Le champ doit être visible dans le formulaire
  • Le champ doit être en lecture seule

Solution :

colModel:[
        {  name:'providerUserId',
               index:'providerUserId', 
               width:100,editable:true, 
               editrules:{required:true}, 
               editoptions:{ 
                            dataInit: function(element) { 
                                  jq(element).attr("readonly", "readonly"); 
                             } 
                           }
            },
],

Le providerUserId est visible dans la grille et visible lors de l'édition du formulaire. Mais vous ne pouvez pas modifier le contenu.


Scénario #2 :

  • Le champ ne doit pas être visible dans la grille
  • Le champ doit être visible dans le formulaire
  • Le champ doit être en lecture seule

Solution :

colModel:[
           {name:'providerUserId',
            index:'providerUserId', 
            width:100,editable:true, 
            editrules:{
                         required:true, 
                         edithidden:true
                      },
            hidden:true, 
            editoptions:{ 
                  dataInit: function(element) {                     
                             jq(element).attr("readonly", "readonly"); 
                          } 
                     }
         },
        ]

Remarquez que dans les deux cas, j'utilise jq pour faire référence à jquery, au lieu du $ habituel. Dans mon HTML, j'ai le script suivant pour modifier la variable utilisée par jQuery :

<script type="text/javascript">
    var jq = jQuery.noConflict();
</script>

22voto

Anthony M. Powers Points 693

Vous pouvez utiliser le code suivant pour masquer une colonne de tableau

JQuery("tableName").hideCol("colName");

Et vous pouvez utiliser le code suivant pour le montrer à nouveau.

JQuery("tableName").showCol("colName");

Pour votre question, vous pouvez appeler le code hideCol() sur le document.ready(), et vous pouvez lier le code showCol() sur l'événement edit/click de la boîte de dialogue.

7voto

Aaron Points 51

Ce fil de discussion est assez ancien je suppose, mais au cas où quelqu'un d'autre tomberait sur cette question... Je devais récupérer une valeur de la ligne sélectionnée d'un tableau, mais je ne voulais pas montrer la colonne de cette ligne. J'ai utilisé hideCol, mais j'ai eu le même problème qu'Andy, c'est-à-dire que ça faisait désordre. Pour le résoudre (appelez ça un hack), j'ai simplement redéfini la largeur de la grille.

jQuery(document).ready(function() {

       jQuery("#ItemGrid").jqGrid({ 
                ..., 
                width: 700,
                ...
        }).hideCol('StoreId').setGridWidth(700)

Comme la largeur de mes lignes est automatique, lorsque j'ai réinitialisé la largeur du tableau, les largeurs des colonnes ont été réinitialisées, mais la colonne cachée a été exclue, ce qui a permis de combler l'écart.

1voto

queen3 Points 8810

Essayez d'utiliser edithidden : true et faites aussi

editoptions: { dataInit: function(element) { $(element).attr("readonly", "readonly"); } }

Ou consultez le wiki de jqGrid pour l'édition personnalisée, vous pouvez configurer n'importe quel type d'entrée, même les étiquettes je pense.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X