首页 文章

单列ag-grid，将列扩展为网格宽度

提问于
浏览 次
4

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

enter image description here

但后来我明白了 .

enter image description here

<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/没有帮助我 .

非常感谢！

ag-grid

2 回答

  • 9

    我建议将网格设置为％或使用vh作为其宽度，然后网格将根据父容器增长/收缩 .

    要使列更改大小，您可以在每次网格大小更改时挂钩事件并调整大小：

    var gridOptions = {
    onGridSizeChanged: () => {
        gridOptions.api.sizeColumnsToFit();
    }    
    ...other gridOptions
};
    回复于
  • 0

    如果您已经知道网格的宽度，那么在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}
    回复于

相关问题