【问题标题】:How to dynamically increase the row height using Ag-Grid?如何使用 Ag-Grid 动态增加行高?
【发布时间】:2017-02-20 01:47:27
【问题描述】:

我有一张使用 ag-Grid 的表格。我想根据单元格中的文本调整行高。在文档https://www.ag-grid.com/javascript-grid-row-height/index.php 中,它是针对特定列给出的。但在我的情况下,任何列都可以有更多文本。那么如何根据任意一列的最大文字大小来调整行高呢。

$scope.gridOptions = {
            angularCompileRows: true,
            enableColResize: true,
            enableSorting: true,
            enableFilter: true,
            groupHeaders: true,
            suppressCellSelection: true,
            columnDefs: cols,
            rowData: statusPageObj.rows,
            onGridReady: opmGridReady,
            angularCompileRows: true,
            headerHeight: 45,
            /*rowHeight: 50,*/
            getRowHeight: function(params) {
               return 50;
            }

        };

【问题讨论】:

  • 有这方面的cmets吗?
  • 您可以在getRowHeight 函数中使用params.data。这是您最初提供给网格的数据,然后您只需要遍历所有行,然后遍历所有单元格以查找哪个具有最大文本长度
  • @JarodMoser 会导致性能问题吗?因为我有一个非常大的 json
  • 可能,但是如果您真的想根据具有最大内容的单元格更改行高,那么除了遍历您拥有的每个单元格之外,我真的看不到任何其他方式。您的另一个选择是猜测您需要的最大高度并从头开始设置
  • 但我不知道它会对性能产生多大影响。所以你不妨试一试,看看加载时间有多长。

标签: javascript css ag-grid


【解决方案1】:

您可以根据文本长度确定行高。

gridOptions.getRowHeight = function() {
     return 18 * (Math.floor(params.data.myDataField.length / 45) + 1);
}

【讨论】:

    【解决方案2】:

    步骤:1 html代码

    <button onclick="setrowHeight(50)">50px</button>
    

    步骤:2 js代码

    var rowHeight = 25;
    
    function setrowHeight(height) {
        rowHeight = height;
        gridOptions.api.resetRowHeights();
    }
    

    看这个https://embed.plnkr.co/FEK7wtQfVwUXeYjOh6PK/

    【讨论】:

    猜你喜欢
    • 2019-08-11
    • 2016-06-05
    • 2016-06-22
    • 2016-06-23
    • 2020-03-21
    • 2021-11-15
    • 2016-04-06
    • 2018-02-09
    • 2019-03-01
    相关资源
    最近更新 更多