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>ag-grid 固定底部例子</title>
    <script src="//www.itxst.com/package/ag-grid/ag-grid-community.js"></script>
    <link href="//www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet" />
</head>
<body>
    <input type="button" value=" 新增固定在底部的行 " onclick="add()" />
    <br /><br />
    <div id="myGrid" style="width: 100%;height: 300px;" class="ag-theme-balham"></div>
    <script>
        //定义表格列
        var columnDefs = [
            { headerName: '姓名', field: 'name', 'pinned': 'left' },
            { headerName: '性别', field: 'sex' },
            { headerName: '年龄', field: 'age' },
        ];

//与列对应的数据; 属性名对应上面的field
        var rowData = [
            { name: 'itxst.com', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },
            { name: '李四', sex: '女', age: '5', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市文一西路' },
            { name: '王五', sex: '女', age: '20', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路31号' }
        ];

//模拟几行数据出来
        for (var i = 1; i < 20; i++) {
            rowData.push({ name: '王五', sex: '女', age: 10 + i, 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路' + i + '号' });
        }

};
        //在dom加载完成后 初始化agGrid完成
        document.addEventListener("DOMContentLoaded", function () {
            var eGridDiv = document.querySelector('#myGrid');
            new agGrid.Grid(eGridDiv, gridOptions);
        });

function add() {
            var newRows = [
                { name: '置顶行11111 new', sex: 'X', age: '15', 'jg': '中国', 'sf': '顶部1', 'dz': '杭州市文一西路' },
                { name: '置顶行22222 new', sex: 'X', age: '15', 'jg': '中国', 'sf': '顶部2', 'dz': '杭州市文一西路' }
            ];
            gridOptions.api.setPinnedBottomRowData(newRows);
        }
    </script>
</body>
</html>