it-swarm.com.de

So legen Sie die Spaltenbreite in AngularJS-UI-Raster automatisch fest

Wie kann ich in AngularJS ui-grid das Raster so konfigurieren, dass es die Breite der Spalten beim Rendern automatisch an den Inhalt anpassen kann?

Ich weiß, dass es ein Tutorial gibt, das die Auto-Size-Funktion anzeigt, aber das funktioniert nur, wenn Sie auf die Spalte doppelklicken. Ich wünschte, es könnte geschehen, wenn das Raster gestartet wird. 

13
Tony

Ich glaube nicht, dass diese Funktion an dieser Stelle existiert. Die Direktive uiGridColumnResizer registriert Ereignis-Listener für dblclick, mousedown und mouseup. Das dblclick -Ereignis durchläuft im Wesentlichen alle gerenderten Zellen, berechnet die maximale Breite und legt sie als Spaltenbreite fest. Dies ist ein Leistungsproblem, wenn Sie viele Zeilen gerendert haben. 

Ich würde wahrscheinlich nur eine maximal mögliche Breite einstellen, basierend auf den Daten, die das Gitter haben wird. 

Oder versuchen Sie, das Verhalten im uiGridColumnResizer zu replizieren. 

 $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

verwenden Sie einen Stern in Ihrer Spaltendefinition:

width:"*";
3
cramroop

Es gibt ein Plugin, das dies tut: ui-grid-auto-fit-column

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

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

Verwendungszweck:

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

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

Das funktionierte für mich, als ich alle Spalten mit Ausnahme einer Spalte verkleinern musste. Ich durchlaufe alle Spalten, nachdem das Laden des Rasters abgeschlossen ist, und löse ein Doppelklickereignis auf dem Größenänderungsfaktor aus. Nicht das Schönste, wenn also jemand anderes eine bessere Lösung hat, würde ich mich sehr freuen, es zu hören!

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

Mit width : "*" werden alle Spalten im verfügbaren Ansichtsport angepasst, sodass die Spalten komprimiert werden.

Wenn Sie minWidth: "somevalue" und width: "*" angeben, wird Ihr Ui-Grid besser aussehen 

1
rtvalluri

sie können * wie in der width-Eigenschaft verwenden - wird als auto.__ betrachtet. Sie können hier sehen.

1
yanai edri

Die beste Lösung, die ich finden kann, ist:

  1. setze die Gitterbreite auf 100% 
  2. setzen Sie das Attribut maxWidth: für die columnDefs, deren Größe Sie nicht festlegen möchten, auf eine kleine Zahl
  3. lassen Sie die Rastergröße selbst

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'},
            ],

Ich weiß, dass dies nicht in jedem Fall funktioniert, aber meistens sind die meisten Ihrer Spalten mehr oder weniger fixiert und die variablen, die Sie im Voraus kennen, sind diejenigen, deren Größe Sie ändern können.

0
Rob Sedgwick

fügen Sie den gridoptions Folgendes hinzu

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

Stellen Sie sicher, dass Sie für jede Spaltendefinition eine beliebige Zufallszahl haben

width: 100 

ist gut.

0
lazell

Ich habe keine Implementierung dafür gefunden, also habe ich dies getan 

  1. Iteriert durch die ersten 10 Datensätze.

  2. Die maximale Datengröße für jede Spalte gefunden.

  3. Dann wurde ein span-Tag erstellt und mit diesen Daten versehen.

  4. Gemessen die Breite des Tags, und dies wäre Ihre ungefähre Breite für die Spalte (möglicherweise muss aufgrund des CSS-Effekts etwas konstantere Breite angefügt werden).

  5. Wenn die ersten 10 Datensätze null sind, führen Sie denselben Vorgang aus, diesmal jedoch mit dem Spaltenkopf.

0
Python Boy

Ich habe Probleme mit der Breitenlösung gefunden. Wir sollten die Eigenschaft 'cellClass' im ui-grid-Spaltenobjekt verwenden, um diese Klasse zu aktivieren. 

.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;
}

dann sollten Sie die Eigenschaft cellClass im ui-grid column-Objekt verwenden, um diese Klasse in Ihrem Grid zu aktivieren (etwa so)

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

Sie können auf die ausführliche Beschreibung von nekhaly antworten. https://github.com/angular-ui/ui-grid/issues/3913

0
level