Colonnes cachées dans jqGrid

Question

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 ?

Answer 1

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é.

Answer 2

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>

Answer 3

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.

Answer 4

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.

Answer 5

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.