以角度ui网格设置列宽

I'm using angular ui-grid and have a long grid with almost 30 columns, I want to set fixed width for columns so that at least column header can be seen easily. Is there a way to set, say 10% width for all the columns, or I have to do it for each column one by one.

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

After setting the min-width on ui-grid-header-cell many columns got combined into one

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

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

6 个解决方案

#1

After you have set your column definitions, you can add the following

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

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

This will set all of the columns to the width you select. With 30 columns at 10% the user will use the horizontal scrollbar to see all the columns, as you prefer. I didn't change any CSS.

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

#2

If you are looking for fixed width, you can use the width property in the colomnDefs like this:

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

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

#3

The best way is to use the GridOptions minimumColumnSize property:

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

$scope.gridOptions.minimumColumnSize = 100;

$ scope.gridOptions.minimumColumnSize = 100;

Zero performance impact and no oddities with the CSS methods.

零性能影响，CSS方法没有奇怪之处。

Reference page, Ctrl-F minimumColumnSize: http://ui-grid.info/docs/#!/api/ui.grid.class:GridOptions

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

#4

Try by the following function by calling before ui-grid data source binds.

通过在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);
        }
    }

set column width to width: "*" and set minWidth as per convinient.

将列宽设置为宽度：“*”并根据方便设置minWidth。

This solution is work for any screen as, especially large resolution screen. It will manage to equally divide maxWidth of all columns and cover the whole area of the screen.

该解决方案适用于任何屏幕，尤其是大分辨率屏幕。它将设法平均划分所有列的maxWidth并覆盖整个屏幕区域。

#5

you can add a style to your css

你可以为你的CSS添加一个样式

.ui-grid-header-cell {

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

}

#6

If you will add width using for loop or like ways it may slow down rendering of your grid, So I would suggest to do it via CSS. Because I had same problem with 15,000 rows and 80 columns and I tried adding width using loop and it seems to slow down rendering of grid. So, Try adding below code in your CSS, it will solve your purpose.

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

#1