web-dev-qa-db-fra.com

Comment redimensionner automatiquement la largeur de colonne dans AngularJS ui-grid

Dans AngularJS ui-grid , comment puis-je configurer la grille pour qu’elle puisse ajuster automatiquement la largeur des colonnes en fonction du contenu lors du rendu?

Je sais qu’il existe un tutorial indiquant la fonction de taille automatique, mais cela ne fonctionne que lorsque vous double-cliquez sur la colonne. J'aimerais que cela se produise lors du lancement de la grille. 

javascriptangularjsangularjs-directiveangular-ui-grid
13
Tony

Je ne pense pas que cette fonctionnalité existe à ce stade. La directive uiGridColumnResizer enregistre les écouteurs d'événements sur dblclick, mousedown et mouseup. L'événement dblclick parcourt toutes les cellules rendues, calcule la largeur maximale et la définit comme largeur de colonne. Ce sera un problème de performance si vous avez beaucoup de lignes rendues. 

Je définirais probablement une largeur maximale possible en fonction des données de la grille. 

Ou essayez de répliquer le comportement dans uiGridColumnResizer. 

 $Elm.on('dblclick', function(event, args) {
      event.stopPropagation();

      var col = uiGridResizeColumnsService.findTargetCol($scope.col, $scope.position, rtlMultiplier);

      // Don't resize if it's disabled on this column
      if (col.colDef.enableColumnResizing === false) {
        return;
      }

      // Go through the rendered rows and find out the max size for the data in this column
      var maxWidth = 0;
      var xDiff = 0;

      // Get the parent render container element
      var renderContainerElm = gridUtil.closestElm($Elm, '.ui-grid-render-container');

      // Get the cell contents so we measure correctly. For the header cell we have to account for the sort icon and the menu buttons, if present
      var cells = renderContainerElm.querySelectorAll('.' + uiGridConstants.COL_CLASS_PREFIX + col.uid + ' .ui-grid-cell-contents');
      Array.prototype.forEach.call(cells, function (cell) {
          // Get the cell width
          // gridUtil.logDebug('width', gridUtil.elementWidth(cell));

          // Account for the menu button if it exists
          var menuButton;
          if (angular.element(cell).parent().hasClass('ui-grid-header-cell')) {
            menuButton = angular.element(cell).parent()[0].querySelectorAll('.ui-grid-column-menu-button');
          }

          gridUtil.fakeElement(cell, {}, function(newElm) {
            // Make the element float since it's a div and can expand to fill its container
            var e = angular.element(newElm);
            e.attr('style', 'float: left');

            var width = gridUtil.elementWidth(e);

            if (menuButton) {
              var menuButtonWidth = gridUtil.elementWidth(menuButton);
              width = width + menuButtonWidth;
            }

            if (width > maxWidth) {
              maxWidth = width;
              xDiff = maxWidth - width;
            }
          });
        });

      // check we're not outside the allowable bounds for this column
      col.width = constrainWidth(col, maxWidth);

      // All other columns because fixed to their drawn width, if they aren't already
      resizeAroundColumn(col);

      buildColumnsAndRefresh(xDiff);

      uiGridResizeColumnsService.fireColumnSizeChanged(uiGridCtrl.grid, col.colDef, xDiff);
    });
4
Kathir

utilisez un astérisque dans votre définition de colonne:

width:"*";
3
cramroop

Il y a un pluggin qui fait ça: ui-grid-auto-fit-columns

GitHub: https://github.com/Den-dp/ui-grid-auto-fit-columns

Exemple: http://jsbin.com/tufazaw/edit?js,output

Usage:

<div ui-grid="gridOptions" ui-grid-auto-fit-columns></div>

angular.module('app', ['ui.grid', 'ui.grid.autoFitColumns'])
2
Leonel Thiesen

Donc, cela a fonctionné pour moi lorsque je devais réduire toutes les colonnes sauf une. Je parcours toutes les colonnes une fois le chargement de la grille terminé et déclenche un double-clic sur le resizer. Pas la plus jolie, donc si quelqu'un d'autre a une meilleure solution, je serais très heureux de l'entendre!

function resizeColumn(uid) {
    // document.querySelector might not be supported; if you have jQuery
    // in your project, it might be wise to use that for selecting this
    // element instead
    var resizer = document.querySelector('.ui-grid-col' + uid + ' .ui-grid-column-resizer.right');
    angular.element(resizer).triggerHandler('dblclick');
}

var gridOptions = {
    ...
    onRegisterApi: function (gridApi) {
        // why $interval instead of $timeout? beats me, I'm not smart enough
        // to figure out why, but $timeout repeated infinitely for me
        $interval(function() {
            var columns = gridApi.grid.columns;
            for(var i = 0; i < columns.length; i++) {
                // your conditional here
                if(columns[i].field !== 'name') {
                    resizeColumn(columns[i].uid)
                }
            }
        }, 0, 1);
    }
}
1
SnailCoil

En utilisant width : "*", toutes les colonnes du port de vue disponible seront ajustées, ce qui donnera des colonnes à compresser.

Spécifier minWidth: "somevalue" et width: "*" améliore l'apparence de votre grille ui 

1
rtvalluri

vous pouvez utiliser * comme dans la propriété width - est considéré comme autovous pouvez voir ici

1
yanai edri

La meilleure solution que je puisse trouver est de:

  1. définir la largeur de la grille à 100% 
  2. définir l'attribut maxWidth: sur l'attribut columnDefs que vous ne souhaitez pas redimensionner à un petit nombre
  3. laissez la taille de la grille elle-même

html:

ui-grid="gridOptions" class="myuigrid" ui-ui-grid-resize-columns ui-grid-ui-grid-auto-resize></div>

css:

.myuigrid {
   width: 100%;
 }

js

            columnDefs: [
              { name: 'Id', maxWidth:80 },
              { name: 'Name', maxWidth: 280 },
              { name: 'LongName'},
            ],

Je sais que cela ne fonctionnera pas dans tous les cas, mais la plupart du temps, la plupart de vos colonnes sont plus ou moins fixes et celles variables que vous connaissez à l’avance sont celles à laisser redimensionner.

0
Rob Sedgwick

ajouter ce qui suit aux options de grille

                    init: function (gridCtrl, gridScope) {
                        gridScope.$on('ngGridEventData', function () {
                            $timeout(function () {
                                angular.forEach(gridScope.columns, function (col) {
                                    gridCtrl.resizeOnData(col);
                                });
                            });
                        });
                    }

Assurez-vous d'avoir une largeur d'un nombre aléatoire sur chaque définition de colonne

width: 100

c'est bien.

0
lazell

Je n'ai trouvé aucune implémentation pour cela, donc c'est ce que j'ai fait 

  1. Itéré à travers les 10 premiers enregistrements.

  2. Trouvé la taille maximale des données pour chaque colonne.

  3. Ensuite, créez une balise span à la volée et enveloppez-la avec ces données.

  4. Mesuré la largeur de la balise et qui correspondrait à la largeur approximative requise pour la colonne (vous devrez peut-être ajouter une largeur plus constante en raison de l'effet CSS, etc.).

  5. Si les 10 premiers enregistrements sont null, procédez de la même manière, mais cette fois avec un en-tête de colonne.

0
Python Boy

J'ai trouvé des problèmes avec la solution de largeur. Nous devrions utiliser la propriété 'cellClass' dans l'objet ui-grid columns pour activer cette classe. 

.ui-grid-cell-contents-auto {
     /* Old Solution */
    /*min-width: max-content !important;*/

    /* New Solution */
    display: grid;
    grid-auto-columns: max-content;

    /* IE Solution */
    display: -ms-grid;
    -ms-grid-columns: max-content;
}

alors vous devriez utiliser la propriété cellClass dans l'objet ui-grid columns pour activer cette classe sur votre grille (comme ceci)

columns: [{ field: 'search_name', displayName: '', cellClass: 'ui-grid-cell-contents-auto'}]

Vous pouvez vous reporter à la description détaillée de la réponse de nekhaly. https://github.com/angular-ui/ui-grid/issues/3913

0
level