以角度ui网格设置列宽

Question

我正在使用角度ui-grid并且有一个长达30列的网格,我想为列设置固定宽度,以便至少可以轻松看到列标题.有没有办法设置,比如说所有列的宽度都是10%,或者我必须逐个为每列做这个.

在ui-grid-header-cell上设置min-width后,许多列合并为一列

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

Answer 1

设置列定义后,可以添加以下内容

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

这会将所有列设置为您选择的宽度.使用30列10%时,用户将使用水平滚动条查看所有列,如您所愿.我没有改变任何CSS.

Answer 2

如果要查找固定宽度，则可以在colomnDefs中使用width属性，如下所示：

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

Answer 3

最好的方法是使用 GridOptionsminimumColumnSize 属性：

$scope.gridOptions.minimumColumnSize = 100;

CSS 方法对性能零影响且没有任何异常。

参考页面，Ctrl-FminimumColumnSize：http://ui-grid.info/docs/# !/api/ui.grid.class:GridOptions

Answer 4

你可以在你的CSS中添加一个样式

.ui-grid-header-cell {

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

}