Existe-t-il un exemple de travail complet pour un ColqChooser jqGrid?

À http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jquery_ui_methods il y a des instructions pour la construction d'un jqGrid sélecteur de colonnes ('dlog_opts est une option de l'objet à être passé à “dlog”, ou (plus probablement) une fonction qui crée l'objet d'options. La valeur par défaut produit adapté objet d'options pour l'interface utilisateur.boîte de dialogue"), mais pas complète code de travail; aucun exemple n'est fourni de la fonction qui est nécessaire.

Est-il complet exemple de travail pour la construction d'un jqGrid sélecteur de colonnes qui permettra de masquer, afficher, et le déplacement des colonnes?

source d'informationauteur JonathanHayward

  1. 18

    Regarder le vieil exemple de la réponse. L'exemple est la plupart du temps sur un autre sujet, mais dans la barre de navigation, vous pouvez voir le "sélecteur de colonnes". En cliquant sur le bouton d'affichage de la colonne de dialogue sélecteur. Vous pouvez faire glisser le nom d'une colonne à partir de la boîte de dialogue et le déposer sur un autre emplacement pour modifier l'ordre des colonnes. Vous pouvez cliquer sur "-" pour masquer la colonne et faites-le glisser n'importe quelle colonne de la liste des colonnes masquées et déposez-le dans la liste des colonnes visibles.

    Pour reproduire le problème, vous devez d'abord assurez-vous que lors de jqGrid téléchargement vous avez "jQuery UI addons" (grid.jqueryui.js) sélectionné. Ensuite, vous devez suivre les étapes:

    1. inclure ui.multiselect.css à partir du répertoire plugins de jqGrid 4.0 source.

    2. inclure jQuery UI jquery-ui.min.js (pas seulement jquery-ui.css besoin généralement pour jqGrid)

    3. inclure ui.multiselect.js après la jquery-ui.min.js

    4. ajouter un nouveau bouton qui appel le sélecteur de colonnes

    Le code peut être comme suit

    var grid = $('#list');
grid.jqGrid ('navButtonAdd', '#pager',
             { caption: "", buttonicon: "ui-icon-calculator",
               title: "Choose Columns",
               onClickButton: function() {
                    grid.jqGrid('columnChooser');
               }
             });

    Mise à JOUR: La réponse contient la description de certains de personnalisation supplémentaires de columnChooser basé sur ma suggestion.