有没有办法动态设置Angularjs ui-grid的col宽度？答案

【问题标题】：Is there a way to dynamically set the col widths of Angularjs ui-grid?有没有办法动态设置Angularjs ui-grid的col宽度？
【发布时间】：2018-08-10 17:21:44
【问题描述】：

有没有办法以编程方式动态更改 Angularjs 的 ui-grid 中的列宽？

我试过更改$scope.gridOptions.columnDefs[i].width，但没有任何效果。

我问是因为我设置了 ui-grid-resize-columns 指令，允许用户调整最初设置为百分比宽度的列的大小。但是一旦用户进行任何手动修改，列的大小就会全部变为静态，不再随整个表格宽度而增长或缩小。

我想添加一个“自动调整”按钮，允许用户将列大小定义恢复为百分比（基于他们当前手动设置的比例），加起来为 100%。理想情况下，列将开始再次调整以适应表大小的变化。

我可以看到用户经常按 F5 来获得这种效果（我愿意！），在不知不觉中导致整个页面从头开始重新加载，不必要地消耗大量服务器资源。我想一个不愉快的选择是从一开始就让它们静止，消除这种诱惑！

【问题讨论】：

标签： angularjs angular-ui-grid

【解决方案1】：

更改 columnDef 宽度不起作用，因为 GridColumn 已经从 columnDefs 构建，并且 ui-grid 仅监视 columnDefs 数组的更改，而不是单个 columnDef 属性。您可以做的是在列的 GridColumn 对象上设置新的列宽。这对我有用。

    $scope.grid.getColumn('my-column').width = $newWidth;
    $scope.grid.refresh();

您还可以删除并重新添加宽度属性已更改的列，因为这应该会触发网格从 columnDefs 重建 GridColumns，尽管我没有对此进行测试，前者似乎更容易。

【讨论】：

干得好，成功了！对于其他感兴趣的人，让我澄清一下它是 gridApi.grid.columns，您可以遍历每一列，如果您正在使用第一列，则第一列是行选择器（所以不要调整它的大小）。我在任何地方都没有找到 getColumn 方法，但事实证明我不需要一个方法来完成我想做的事情。

【解决方案2】：

 function SetColumnDynamicWidth() {
        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);
        }
    }

如果您在所有列中设置了 $scope.gridOptions.columnDefs，则从 colDefs 中删除 maxWidth。在列定义中设置width: "*"。

同样的方式你也可以设置minWidth

此解决方案对于大分辨率屏幕非常有用。您可以将 ui-grid 扩展到大屏幕的所有部分，并平均划分所有列宽。

您可以避免以下类型的 ui-grid 问题

【讨论】：