具有单列的 ag-grid，将列扩展到网格宽度

Question

我在 Angular 应用程序中设置了一个 ag-grid。我正在尝试使单列填充网格的整个宽度。

但后来我明白了。

    <div class="row" ng-controller="ChapterCtrl" ng-init="currentUNID='9D2DFE6D50C53A98C1257F5900337F37'">
    <div class="col-sm-4">
        <div >
            <div ag-grid="gridOptions" class="ag-fresh" style="height: 800px"></div>
        </div>
    </div>

   var columnDefs = [
    {headerName: "Subject", field: "Subject"}
];

$scope.gridOptions = {
    columnDefs: columnDefs,
    angularCompileRows: true,

你有什么提示吗？文档https://www.ag-grid.com/javascript-grid-width-and-height/ 对我没有帮助。

非常感谢！

Answer 1

我的建议是将网格设置为具有 % 或使用 vh 作为其宽度，然后网格将根据父容器增长/缩小。

要使列改变大小，您可以挂钩到一个事件，每次网格大小改变时都会调整大小：

var gridOptions = {
    onGridSizeChanged: () => {
        gridOptions.api.sizeColumnsToFit();
    }    
    ...other gridOptions
};

Answer 2

试试 'flex' 列属性：

{ headerName: 'Test', flex: 1}

您也可以使用它仅展开最后一列。

Oficial documentation

Answer 3

如果您已经知道网格的宽度，则在 columnDefs 中设置相同的宽度：

var columnDefs = [
{headerName: "Subject", field: "Subject", width: 350//width in pixels}

如果您的网格设置为具有取决于用户窗口大小的动态宽度，那么您可能能够获取表格元素的宽度，然后将该宽度放入 columnDefs。

编辑：

对于响应式设计：

1) 添加 id 以方便查找：

<div id="myTable" ag-grid="gridOptions" class="ag-fresh" style="height: 800px"></div>

2) 找到表格然后找到它的宽度：

var colWidth = document.getElementById('myTable').clientWidth;

或者如果你更喜欢 jquery：

var colWidth = $('#myTable').width()

3) 在 columnDefs 中设置宽度：

var columnDefs = [
{headerName: "Subject", field: "Subject", width: colWidth}