以角度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

最好的方法是使用GridOptions minimumColumnSize属性：

$scope.gridOptions.minimumColumnSize = 100;

对性能的影响很小，而且CSS方法也不奇怪。

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

Answer 3

如果您正在寻找固定宽度，可以使用colomnDefs中的width属性，如下所示：

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

Answer 4

在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并覆盖屏幕的整个区域。

Answer 5

您可以为css添加样式

.ui-grid-header-cell {

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

}

Answer 6

如果你使用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;
}