单列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

如果您已经知道网格的宽度，则在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}