Comment redimensionner automatiquement la colonne dans SlickGrid?

Question

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

Answer 1

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

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

Cela fera que les colonnes occupent toute la largeur de votre div.

Answer 2

La COOP est à la recherche pour les colonnes de croître pour correspondre à leur contenu. grid.autosizeColumns() pousse les cellules pour adapter le conteneur parent, qui n'est pas la même chose.

J'ai ajouté cette fonction, et il est sur que le manuel comme vous pouvez l'imaginer. Vous parcourez la affiche des cellules et à la mesure de chacun, de l'économie de la cellule la plus large et en utilisant la largeur de définir la largeur de votre colonne. SlickGrid vous donne un bon accès aux cellules dans la fenêtre d'affichage, de sorte que fonctionne bien.

L'algorithme de mesure est votre décision importante. Vous pouvez mettre le contenu hors de l'écran et de la mesurer, comme @jay suggère. Cela fonctionne, mais c'est la méthode la plus lente, car elle nécessite une mise à insérer et à une mise à jour lorsque vous le retirez. Il y a peut-être des moyens pour optimiser. La solution, je suis allé avec est de mesurer la largeur de chaque lettre de l'alphabet, ainsi que d'autres caractères typographiques, nous avons rencontré, et la somme de générer une largeur. Oui, cela semble absurde. Il a de nombreuses contraintes: la taille de La police doit être le même, il ne supporte pas les images, il ne peut pas y avoir de retour, et plus encore. Si vous pouvez vivre avec les contraintes, vous pouvez calculer les tailles pour une grande grille de la fenêtre d'affichage en <5ms, parce que la largeur des caractères ne sont mesurées une fois.

Après que vous obteniez la taille des colonnes, vous de les assigner à vos colonnes à l'aide de grid.setColumns().

Answer 3

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

 grid.autosizeColumns();
 

Answer 4

Insérez le texte dans un élément hors écran et récupérez la largeur de l'élément. C'est ce que fait excanvas pour mesurer le texte. Utilisez cette option pour définir la largeur de la colonne car elle attend une valeur en pixels.