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

Question

我在 Angular 应用程序中设置了一个农业网格。我试图让单列填满网格的整个宽度。

但后来我明白了。

    <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

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

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

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

编辑：

对于响应式设计：

1) 添加一个 id 以方便查找：

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

2) 找到 table 然后找到它的宽度：

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

或者如果你喜欢 jquery:

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

3) 在columnDefs中设置宽度：

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

Answer 2

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

要使列的大小发生变化，您可以在每次网格大小发生变化时挂钩一个调整大小的事件：

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

Answer 3

尝试 'flex' 列属性:

{ headerName: 'Test', flex: 1}

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

Oficial documentation

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

ag-grid with single column, expand column to grid width

ag-grid