Slickgrid largeur de colonne doit obtenir automatiquement redimensionnées en fonction de la plus large ligne de contenu

Dans Slickgrid est-il de toute façon où la largeur de la colonne d'obtenir automatiquement redimensionnées en fonction de la plus large rangée de contenu?

Dans l'exemple de exemple je peux voir la valeur de la colonne comme codés en dur pour le champ colonne http://mleibman.github.com/SlickGrid/examples/example2-formatters.html

var columns = [
    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
    {id: "start", name: "Start", field: "start", minWidth: 60},
    {id: "finish", name: "Finish", field: "finish", minWidth: 60},
    {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}
  ];

Nope. Vous devez calculer la largeur de chaque cellule de chaque ligne.
Il y a une belle plugin qui fait cette fonction: github.com/naresh-n/slickgrid-column-data-autosize

OriginalL'auteur Anup Khandelwal | 2013-03-04

jquery slickgrid

6

Oui, à ajouter À cela. Il faut éloigner le point de l'ensemble de la ligne de virtualisation. Mais si votre jeu de données est petite, vous pouvez calculer l'. Voici une fonction que j'ai utilisé pour calculer la largeur d'un texte.
```
 String.prototype.textWidth = function(font) {
    var f = font || '12px Helvetica,Arial,sans-serif',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

    o.remove();
  return w;
}
```
Ce que j'ai fait a été de calculer la textWidth() de l'en-tête. Valeur de "nom". Ainsi, au moins la colonne correspond à la largeur du texte d'en-tête. Que vous pouvez faire sans se soucier de la virtualisation. Fx...
```
columns.push({ id: "col1", name: "Column 1", field: "col1", width: "Column 1".textWidth() + <Some padding?>});
```
Ou si vous voulez vraiment analyser l'ensemble de votre tableau de données de l'appel de la fonction à l'encontre de chaque valeur de données dans les colonnes/champs et ensuite garder le max. Mais c'est très inefficace.

OriginalL'auteur Tim
7

Vous pouvez utiliser le forceFitColumns option, qui permettra de modifier la taille de chaque colonnes pour s'adapter, mais si votre largeur n'est pas assez large, il va essayer de s'adapter en fonction de vos minimal et maximal des valeurs de la largeur, de sorte que vous voudrez peut-être ajouter un minWidth et un maxWidth si vous avez un peu plus de contrôle.

Par exemple les colonnes de définition pourrait ressembler à ceci:
```
{id: "duration", name: "Duration", field: "duration", minWidth:50, width:100, maxWidth:120}
```
et les options de définition comme ceci:
```
options = {
        enableCellNavigation: true,
        enableColumnReorder: false,
        multiColumnSort: true,
        asyncEditorLoading: true,
        forceFitColumns: true //this one is important        
    };
```
Et bien en fait je viens de réaliser que lors de l'utilisation de la forceFitColumns:true ignorer les valeurs min/max appliquées et d'essayer de tout faire rentrer à l'intérieur de la largeur de la grille, vous avez défini au premier abord. Si, au lieu de les redimensionner, de mon côté, je suis en ajoutant un peu pompette titre en tant que formateur sur mon long des colonnes.
cela a fonctionné pour moi si la valeur minWidth et maxWidth. Combiné avec $(window).redimensionner(function(){grille.resizeCanvas(); }); la grille magnifiquement s'adapte à la largeur de l'écran et respecte min et max de la largeur de colonne.

OriginalL'auteur ghiscoding
0

Oui, croître pour ajuster le contenu peut être fait, mais vous devez le faire vous-même. forceFitColumns sons proches, mais il s'agrandit pour remplir la fenêtre sans se avec le contenu de la cellule.

@Tim idée est bonne, bien que je n'irais pas jusqu'à dire qu'il prend en s'éloignant du point de la ligne de virtualisation. Parce que SlickGrid vous donne de nice, l'accès à la fenêtre d'affichage grid.getViewport().top //bottom vous pouvez calculer la taille de seulement le contenu dans votre fenêtre avec beaucoup de succès.

Je décris ici comment faire en réponse à cette même question: https://stackoverflow.com/a/22231459

OriginalL'auteur SimplGy

Vous devez vous connecter pour publier un commentaire.