web-dev-qa-db-fra.com

Comment dimensionner automatiquement la colonne dans SlickGrid?

Je souhaite que slickgrid redimensionne automatiquement les colonnes en fonction du contenu le plus large ou du texte d'en-tête, le plus large des deux. En termes plus simples, je veux qu'il simule le comportement par défaut des tableaux HTML normaux en ce qui concerne le dimensionnement des colonnes. Comment puis-je le faire dans slickgrid?

slickgridautosizetablecolumn
44
PJ.

Lors de la construction de vos options, vous pouvez utiliser forceFitColumns: true

var options = {
    enableCellNavigation: true,
    forceFitColumns: true
};

Cela permettra aux colonnes de remplir toute la largeur de votre div de grille.

22
csigrist

L'OP recherche des colonnes à agrandir pour correspondre à leur contenu. grid.autosizeColumns() agrandit les cellules pour qu'elles s'adaptent au conteneur parent, ce qui n'est pas la même chose.

J'ai ajouté cette fonctionnalité, et c'est à peu près aussi manuel que vous pourriez l'imaginer. Vous parcourez les cellules affichées et mesurez chacune, en enregistrant la cellule la plus large et en utilisant cette largeur pour définir la largeur de votre colonne. SlickGrid vous donne un bon accès aux cellules dans la fenêtre, donc cela fonctionne bien.

L'algorithme de mesure est votre grande décision. Vous pouvez mettre le contenu hors écran et le mesurer, comme le suggère @jay. Cela fonctionne, mais c'est la méthode la plus lente, car elle nécessite une repeinture à insérer et une repeinture lorsque vous supprimez. Il peut y avoir des moyens d'optimiser. La solution que j'ai choisie est de mesurer la largeur de chaque lettre de l'alphabet, ainsi que d'autres caractères typographiques que nous rencontrons, et de les additionner pour générer une largeur. Oui, cela semble absurde. Il a de nombreuses contraintes: la taille de la police doit être la même, elle ne prend pas en charge les images, il ne peut y avoir de retour de ligne, etc. Si vous pouvez cependant supporter les contraintes, vous pouvez calculer les tailles d'une immense fenêtre de grille dans <5ms, Car les largeurs de caractères ne sont mesurées qu'une seule fois.

Après avoir obtenu les tailles des colonnes, vous les affectez à vos colonnes à l'aide de grid.setColumns().

4
SimplGy

Slickgrid ne prend pas en charge la taille automatique des colonnes en fonction des données. Vous devez écrire un plugin ou forker le noyau de slickgrid pour le modifier.

Voici le lien que j'ai créé un plugin pour gérer la taille automatique de slickgrid https://github.com/naresh-n/slickgrid-column-data-autosize

3
Naresh Nagabhushanam

J'ai ajouté ceci après que la grille soit dessinée et cela fonctionne bien.

$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})
3
Kirk Ross

Vous devriez pouvoir appeler la méthode autosizeColumns() de l'objet grille.

grid.autosizeColumns();
1
njr101

Faites cet ajustement simple à Naresh https://github.com/naresh-n/slickgrid-column-data-autosize , sur la fonction init:

  • Ajoutez $container.ready(resizeAllColumns); à la fonction init.

Cela garantit que les colonnes se redimensionnent automatiquement à la charge initiale

0
William