我们可以在移动设备中更改 AG 网格的视图吗答案

【问题标题】：Can we change the view for AG grid in mobile devices我们可以在移动设备中更改 AG 网格的视图吗
【发布时间】：2019-05-24 00:51:56
【问题描述】：

我很长一段时间以来一直在研究 ag grid。目前我们需要为移动设备更改网格显示（例如宽度

Ag 网格是否支持/转换其视图以用于小型设备？如果是，您能否提供相同的相关链接？

【问题讨论】：

有趣的是，他们的着陆页上的表格在移动设备上调整得非常好（更少的列），但他们没有提供关于这个主题的任何指南..

标签： javascript responsive-design ag-grid

【解决方案1】：

AgGrid 自行调整。默认主题能够自行动态调整大小。

您可以在onGridReady 或onFirstDataRendered 中使用params.api.sizeColumnsToFit()。这将通过滚动进行动态调整大小。

但是我建议为移动设备创建一个单独的视图，仅显示在移动设备视图中有意义的相关列。

var column = [{ field: "Col1" }, { field: "Col2", }, { field: "Col3", }, { field: "Col4", }, { field: "Col5", }];

    var mobileColumn = [{ field: "Col1" }, { field: "Col2", }, { field: "Col3", }];

    window.addEventListener('resize', function () {
        setTimeout(function () {
            if (window.innerWidth <= 480) {
                gridOptions.setColumnDefs(mobileColumn);
                params.api.sizeColumnsToFit();
            }
        })
    })

为移动视图动态设置列

【讨论】：

我们可以将多个单元格组合成一个像显示列表一样的单元格，例如：td1 td2 td3 就像 td 里面有 ul li 项目

【解决方案2】：

根据 Ag-grid 文档，网格将根据窗口大小自动调整大小。详细信息在以下链接中提供。 https://www.ag-grid.com/javascript-grid-responsiveness/

【讨论】：