Ajout du bouton à la barre d'outils supérieure de jqGrid

Question

Il semble que la barre d'outils par défaut pour jqGrid soit toujours en bas. Des boutons comme la page Suivant/Précédent et la liste déroulante permettant de sélectionner le nombre de lignes par page s'afficheront toujours au bas de la grille.

J'ai trouvé un moyen d'ajouter une barre d'outils personnalisée et d'y insérer des boutons personnalisés.

Ce dont nous avons vraiment besoin, c'est d'un moyen d'ajouter des fonctionnalités par défaut (comme la pagination) en haut de la grille, plutôt qu'en bas.

Answer 1

Je ne comprends pas pourquoi il est si important d'avoir une barre d'outils supérieure. N'utilisez-vous pas de pagination ou avez-vous plusieurs lignes dans la grille, que l'on ne peut pas voir en bas de la barre d'outils sans défilement? Ou il y a une autre raison?

Il existe un paramètre booléen toppager de jqGrid (voir setting options for the grid) pour créer un téléavertisseur supérieur supplémentaire. Vous pouvez afficher une barre d'outils, voir le paramètre de la barre d'outils, mais je ne suis pas sûr que vous utilisez la même terminologie que jqGrid. Regardez la démo sur jqGrid Demos (développez "Nouveau dans la version 3.1"). Probablement, vous voulez dire une barre de navigation?

Généralement, jqGrid affichera le fragment HTML et divisera tout avec des éléments div prédéfinis. La barre de navigation sera placée dans le div avec id = "pg_pager" et class = "ui-pager-control". Vous pouvez manipuler jqGrid par rapport à jQuery par exemple pour déplacer cette div à l'autre endroit. Si vous implémentez un tel mouvement, vous devez le répéter à chaque fois dans le handle d'événement gridComplete (ou après qu'un autre événement d'achèvement a été déclenché). EDITED: Il est facile de déplacer un fragment HTML existant vers un autre endroit en respectant jQuery('#element_to_be_moved').insertAfter('#existing_element') ou jQuery('#element_to_be_moved').insertBefore('#existing_element'). Dans jqGrid footer cells "inherits" CSS from cells in the main grid j'ai décrit les noms de certains div importants qui sont des parties de jqGrid. Je vous souhaite beaucoup de succès dans le codage.

Answer 2

J'ai mis à niveau vers jqgrid 3.7.2, dans l'espoir que son paramètre toppager aiderait. Alors qu'il met les commandes de pagination au sommet, le bouton de recherche n'est pas venu pour le tour.

// assuming a jqgrid with id='the_grid' 
$('#the_grid_pager_left').clone(true).insertBefore('#the_grid_toppager_center') 

ci-dessus, avec quelques ajustements mineurs CSS, copier les boutons de recherche/rafraîchissement dans le toppager ainsi, et conservèrent leur événements/comportements.

Answer 3

Profitez:

$('#datagridnav').insertBefore('#t_datagrid'); //relocate footer to top 

Answer 4

Pour avoir la barre d'outils en haut de la grille avec les mêmes boutons et des événements comme la barre d'outils en bas, vous devez activer le toppager:true à la définition de la grille et ajouter les lignes suivantes après la définition

/** Duplicating the Nav Toolbar in top **/ 
var toolbarClone = $('#pager_left').clone(true); 
// Assuming that your grid's ID is myGrid 
$('#myGrid_toppager_left').prepend(toolbarClone); 

Ces lignes feront l'affaire :)