4

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

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

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

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

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

4

2 回答 2

5

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

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

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

于 2014-11-14T00:08:53.373 回答
0 
 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 问题

大屏的ui-grid

于 2018-08-10T09:21:44.247 回答