Einstellung der Spaltenbreite im angularen ui Gitter

Question

Ich benutze angular ui-Gitter und habe ein langes Gitter mit fast 30 Spalten, ich möchte feste Breite für Spalten festlegen, so dass mindestens Spaltenkopf leicht gesehen werden kann. Gibt es eine Möglichkeit zu setzen, sagen wir 10% Breite für alle Spalten, oder ich muss es für jede Spalte einzeln machen.

Nach dem min-width auf ui-Grid-header-Zelle viele Spalten bekam Einstellung in eine

.ui-grid-header-cell { 
    min-width: 150px !important; 
} 

kombiniert

Answer 1

Sie einen Stil zu Ihrem CSS hinzufügen

.ui-grid-header-cell { 

    min-width: 200px !important; 
    max-width: 300px !important; 

} 

Answer 2

Nachdem Sie Ihre Spalte definiert haben Sie können folgende Elemente hinzufügen:

for (var i = 0; i < $scope.gridOptions.columnDefs.length; i++) { 
    $scope.gridOptions.columnDefs[i].width = '10%'; 
} 

Dadurch werden alle Spalten auf die von Ihnen ausgewählte Breite gesetzt. Mit 30 Spalten bei 10% wird der Benutzer die horizontale Bildlaufleiste verwenden, um alle Spalten anzuzeigen, wie Sie bevorzugen. Ich habe kein CSS geändert.

Answer 3

Wenn Sie die Breite mit for for loop oder ähnlichen Methoden hinzufügen, kann dies die Darstellung Ihres Rasters verlangsamen. Daher würde ich vorschlagen, es über CSS zu machen. Weil ich das selbe Problem mit 15.000 Zeilen und 80 Spalten hatte und versuchte, die Breite mit loop zu addieren, und es scheint das Rendern des Rasters zu verlangsamen. Versuchen Sie also, den folgenden Code in Ihr CSS einzufügen. Dadurch wird Ihr Zweck gelöst.

.ui-grid-header-cell { 
min-width: 200px !important; 
max-width: 300px !important; 
} 

.ui-grid-cell { 
min-width: 200px !important; 
max-width: 300px !important; 
} 

Answer 4

Wenn Sie feste Breite suchen, können Sie die Eigenschaft width in den colomnDefs wie diese verwenden:

columnDefs : [ 
      { field : 'pageIcon', displayName : 'Page Icon', width:25}, 
      { field : 'pageName', displayName : 'Page Name', width:100} 
]