web-dev-qa-db-fra.com

Colonnes cachées dans jqGrid

Est-il possible de masquer une colonne dans une table jqGrid, mais l'afficher en lecture seule lorsque la ligne est modifiée dans la boîte de dialogue modale de l'éditeur de formulaire?

javascriptjqueryjqgrid
54
maxpower47

Je veux juste développer la suggestion de queen3 , en appliquant 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"); 
                             } 
                           }
            },
],

ProviderUserId est visible dans la grille et visible lors de la modification du formulaire. Mais vous ne pouvez pas éditer le contenu. 

Scénario n ° 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"); 
                          } 
                     }
         },
        ]

Notez que dans les deux cas, jq utilise JQ comme référence, au lieu des $ habituels. 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>
38
chris

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} 
               }
             ],
   ...
};

Il existe d'autres règles d'édition qui peuvent être appliquées, mais cette configuration de base masquerait le salaire du responsable dans la vue de grille mais autoriserait la modification lorsque le formulaire de modification était affiché. 

79
Bobby Borszich

Vous pouvez utiliser le code suivant pour masquer une colonne de table.

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 document.ready () et lier le code showCol () à l'événement edit/click de la boîte de dialogue.

22
Anthony M. Powers

Ce fil est assez ancien, je suppose, mais au cas où quelqu'un d'autre tomberait sur cette question ... Je devais saisir une valeur dans la ligne sélectionnée d'un tableau, mais je ne voulais pas afficher la colonne correspondant de. J'ai utilisé hideCol, mais j'ai eu le même problème qu'Andy où il semblait désordonné. Pour résoudre ce problème (appelez-le un bidouillage), je viens de redéfinir la largeur de la grille.

jQuery(document).ready(function() {

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

Étant donné que mes largeurs de lignes sont automatiques, lorsque je réinitialise la largeur du tableau, les largeurs de colonne sont supprimées mais la largeur masquée est exclue.

7
Aaron

Pour masquer la colonne de la grille

jQuery("#validGrid").jqGrid('hideCol',str);
1
softmage99

Essayez d’utiliser edithidden: true et faites aussi

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

Ou consultez le wiki jqGrid pour une édition personnalisée. Vous pouvez configurer n’importe quel type d’entrée, même une étiquette, je pense.

1
queen3

C'est un peu vieux, ce post. Mais ceci est mon code pour afficher/masquer les colonnes. J'utilise la fonction intégrée pour afficher les colonnes et juste les marquer.

Fonction qui affiche les colonnes montrées/cachées. #JqGrid est le nom de ma grille et columnChooser est le sélecteur de colonne jqGrid.

  function showHideColumns() {
        $('#jqGrid').jqGrid('columnChooser', {
            width: 250,
            dialog_opts: {
                modal: true,
                minWidth: 250,
                height: 300,
                show: 'blind',
                hide: 'explode',
                dividerLocation: 0.5
            } });
0
Troels