Question

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

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

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

我想添加一个“自动调整”按钮，允许用户将列大小定义恢复为百分比（基于当前手动设置的比例），最多可达100％。理想情况下，列将再次开始调整为表大小更改。

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

Answer 1

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

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

您还可以删除并重新添加具有更改的宽度属性的列，因为这应该触发网格从columnDefs重建GridColumns，尽管我没有测试过这个并且前者看起来更容易。

Answer 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问题

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

2 个答案: