web-dev-qa-db-ja.com

angular uiグリッドでの列幅の設定

angular ui-gridを使用していて、ほぼ30列の長いグリッドがあるので、少なくとも列ヘッダーが簡単に見られるように、列に固定幅を設定したいと思います。方法はありますか？たとえば、すべての列に10％の幅を設定するか、各列に1つずつ設定する必要があります。

ui-grid

Ui-grid-header-cellに最小幅を設定した後、多くの列が1つに結合されました

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

After setting min-width property

angularjsangular-uiangular-ui-grid
10
Mahtab Alam

列定義を設定した後、以下を追加できます

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

これにより、すべての列が選択した幅に設定されます。 10％の30列の場合、ユーザーは好みに応じて、水平スクロールバーを使用してすべての列を表示します。 CSSは変更しませんでした。

6
S. Baggy

固定幅を探している場合は、colomnDefsで次のようにwidthプロパティを使用できます。

columnDefs : [
            { field : 'pageIcon', displayName : 'Page Icon', width : 25},
            { field : 'pageName', displayName : 'Page Name', width : 100},
            { field : 'count',    displayName : 'Count',     width : '30%'}
]
6
ArielGro

最善の方法は、GridOptions minimumColumnSizeプロパティを使用することです。

$scope.gridOptions.minimumColumnSize = 100;

CSSメソッドによるパフォーマンスへの影響はなく、奇妙な点はありません。

リファレンスページ、Ctrl-F minimumColumnSize： http://ui-grid.info/docs/#!/api/ui.grid.class:GridOptions

3
Hanni Ali

Ui-gridデータソースがバインドする前に呼び出すことにより、次の関数を試してください。

 function SetColumnWidth() {
        var cols = _.filter($scope.gridOptions.columnDefs, function (c) {
            return c.visible != false;
        });
        var maxWidth = (document.documentElement.clientWidth) / cols.length;
        for (var i = 0; i < cols.length; i++) {
            cols[i].maxWidth = parseInt(maxWidth);
        }
    }

列幅をwidth: "*"に設定し、必要に応じてminWidthを設定します。

このソリューションは、特に大きな解像度の画面など、どの画面でも機能します。すべての列のmaxWidthを均等に分割し、画面の領域全体をカバーします。

2
Nilay Mistry

cSSにスタイルを追加できます

.ui-grid-header-cell {

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

}
0
Piyush.kapoor

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;
}
0
Madhwendar Thakur