角度uiグリッドの列幅を設定する

Question

私は角度uiグリッドを使用しており、ほぼ30列の長いグリッドを持っています。少なくとも列ヘッダーが見やすくなるように固定幅を設定します。たとえば、すべての列に対して10％の幅を設定する方法がありますか、それとも各列ごとに1つずつ行う必要がありますか。

多くの列が1

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

Answer 1

にまとめてしまったUI-グリッドヘッダーセルに分幅を設定した後、あなたのCSSにスタイルを追加することができます

.ui-grid-header-cell { 

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

} 

Answer 2

あなたは以下を追加することができます

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

これは、すべての列を選択した幅に設定します。 10列の30列を使用すると、ユーザーは水平スクロールバーを使用してすべての列を表示することができます。私はCSSを変更しなかった。

Answer 3

forループなどの方法を使用して幅を追加すると、グリッドのレンダリングが遅くなる可能性があるので、CSSを使用して行うことをお勧めします。私は15,000行と80列で同じ問題があったので、ループを使って幅を追加しようとしましたが、グリッドの描画が遅くなるようです。だから、あなたのCSSでコードの下に追加してみてください、それはあなたの目的を解決します。

.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

あなたが一定の幅を探しているなら、あなたはこのようなcolomnDefsでwidthプロパティを使用することができます：150ピクセル：

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