ag-grid 自适应大小

最新推荐文章于 2023-10-08 15:01:33 发布

前端菜鸟来报道

最新推荐文章于 2023-10-08 15:01:33 发布

阅读量4.8k

点赞数

分类专栏： ag-grid 文章标签： html css

本文链接：https://blog.csdn.net/WQearl/article/details/120078850

版权

ag-grid 专栏收录该内容

15 篇文章 29 订阅

订阅专栏

ag-grid 表格需要自适应浏览器窗口大小，以下为没有自适应的情况：

以下为已经自适应的情况：

如果需要自适应，统一调用api：sizeColumnsToFit() 即可，只不过调用的触发事件不同。分别有以下三种情况出现：

情况1：表格初始化完毕后自适应浏览器大小。

触发事件：ag-grid中的onGridReady事件：在表格ok后调用，适应浏览器大小。

情况2：当浏览器页面大小没变，但是表格大小有变化时，也重绘至自适应浏览器大小。

触发事件：ag-grid中的onGridSizeChanged事件：在表格大小有变化时调用，适应浏览器大小。

情况3：浏览器大小变化时，gird自适应浏览器大小。

触发事件：window的监听事件：window.addEventListener：在浏览器窗口大小有变化时调用，适应浏览器大小。

       window.addEventListener('resize', () => {
            gridOptions.api.sizeColumnsToFit();
        });

情况4：当以上都不满足时，可以试试onColumnEverythingChanged这个属性。

下面是一个ag-grid的完整例子：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>表格适应页面大小</title>
    <script type="text/javascript" src="../js/ag-grid-enterprise.min.js"></script>

</head>

<body>

    <div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-alpine"></div>

    <script>
     
        var columnDefs = [
            {
                headerName: '姓名',
                field: 'name'
            }, {
                headerName: '性别',
                field: 'sex',
            }, {
                headerName: '年龄',
                field: 'age',
            }, {
                headerName: '籍贯',
                field: 'jg'
            }, {
                headerName: '省份',
                field: 'sf',
            }, {
                headerName: '地址',
                field: 'dz'
            },
        ];
        var data = [
            { name: '张三', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },
            { name: '李四', sex: '男', age: '5', 'jg': '中国', 'sf': ' 浙江', 'dz': '杭州市古墩路12号' },
            { name: '王舞', sex: '女', age: '20', 'jg': '中国', 'sf': '浙江 ', 'dz': '杭州市古墩路32号' },
            { name: '李梅', sex: '女', age: '10', 'jg': '中国', 'sf': '浙江 ', 'dz': '杭州市古墩路39号' },

        ];

        // 表格适应页面大小
        function onTotalGridReady(params) {
            gridOptions.api.sizeColumnsToFit();//调整表格大小自适应
        }

        //将列和数据赋给gridOptions 
        var gridOptions = {
            columnDefs: columnDefs,
            rowData: data,
            onGridReady: onTotalGridReady, // 情况一： 表格初始化完毕，自适应浏览器大小。
            onGridSizeChanged: onTotalGridReady,  //情况二： 当浏览器页面大小没变，但是表格大小有变化时，也重绘至自适应浏览器大小
           // onColumnEverythingChanged:onTotalGridReady  
        };


        // 情况三： 浏览器大小变化时，gird自适应浏览器大小
        window.addEventListener('resize', () => {
            gridOptions.api.sizeColumnsToFit();
        });

        document.addEventListener("DOMContentLoaded", function () {
            var eGridDiv = document.querySelector('#myGrid');
            new agGrid.Grid(eGridDiv, gridOptions);
        });
    </script>
</body>

</html>

前端菜鸟来报道

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ag-grid 自适应大小

ag-grid 表格需要自适应浏览器窗口大小，以下为没有自适应的情况：以下为已经自适应的情况：如果需要自适应，统一调用api：sizeColumnsToFit()即可，只不过调用的触发事件不同。分别有以下三种情况出现：情况1：表格初始化完毕后自适应浏览器大小。触发事件：ag-grid中的onGridReady事件：在表格ok后调用，适应浏览器大小。情况2：当浏览器页面大小没变，但是表格大小有变化时，也重绘至自适应浏览器大小。触发事件：ag-grid中的onGri...
复制链接

扫一扫

专栏目录