Façon de faire jqGrid réactif sur les navigateurs web
Je suis nouveau dans jqGrid et j'ai besoin de cette grille sera redimensionnée sur le redimensionnement de la fenêtre du navigateur web. J'ai appliqué autowidth : true;
, shrinkToFit: true;
dans la grille, mais qui ne fonctionne pas.
Réglage de CSS width : 100%
est le seul de la mise en œuvre, mais il n'est pas bon en cas de jqGrid
qui jeu width
dans px
explicitement sur beaucoup de ses structures internes.
quelle serait la meilleure façon de le résoudre ??
Vous devez vous connecter pour publier un commentaire.
jqGrid utilise fixe
width
valeur sur de nombreuses structures internes (vrd, tables et ainsi de suite). Donc on ne peut pas juste mettre CSSwidth : 100%
. Néanmoins, il existe une autre façon de faire de même. On peut s'inscrireresize
gestionnaire d'événement surwindow
de l'objet et de l'appelersetGridWidth
explicitement. La méthode ajuster tous les éléments internes de structures de jqGrid à la nouvelle largeur. Il serait donc propre méthode.Si vous utilisez
autowidth: true
puis jqGrid de régler la largeur de jqGrid à la largeur de son parent qu'une seule fois. À l'intérieur de$(window).resize
gestionnaire, nous pouvons obtenir nouveau (l'actuelle), la largeur du parent et de réinitialiser la valeur de grillewidth
. Le code correspondant est le suivantJ'ai utilisé
$("#list").closest(".ui-jqgrid")
au lieu de$("#list")
parce que jqGrid construire des plongées sur le principal<table>
élément.$("#list").closest(".ui-jqgrid")
donne comme l'extérieur div qui comprennent tous les éléments de la grille.La modification de violon démo montre le code de vivre.
"hidden-xs"
classe de Bootstrap pour la dernière colonne et la colonne sera de cacher/montrer dépendent de la largeur de la grille.classes: "hidden-xs", labelClasses: "hidden-xs"
à partir de la dernière colonne de la démo utilise Bootrsrap classe, qui cachent la colonne si la résolution de la page sera faible.J'ai écrit un css que vous pouvez utiliser pour faire de grille responsive: https://github.com/guylando/Responsive-jqGrid/blob/master/Responsive-jqGrid.css
Son plus rapide que l'utilisation de javascript dans mon opinion.
Voici le code css:
CSS:
Ajouter à la méthode ci-dessous pour beforeEvent de jqgrid......
fonction
J'ai essayé le code suivant, mais a fait observer qu'elle n'apporte aucune barre de défilement pour les dispositifs adaptés. Par conséquent décidé de personnaliser le JQGRID feuille de style:
Veuillez trouver mon hack pour faire JQ Grille correctement sensible
/**** JQ grille de la réactivité ***/
Ajouter à la feuille de style personnalisée & get set pour afficher le JQGrid de répondre pleinement!
D'autres suggestions seront les bienvenus. L'essayer & Profitez-en!