ag-grid中文教程

ag-grid setPinnedTopRowData设置表格置顶行汇总行

有时我们需要在表格顶部设置一行置顶行进行汇总,这时我们可以通过ag-grid setPinnedTopRowData设置表格置顶行汇总行。

效果图

setPinnedTopRowData代码例子

//定义表格列
var columnDefs = [
    { headerName: '名称', field: 'name', 'pinned': 'left' },
    { headerName: 'PV', field: 'pv' },
    { headerName: 'IP', field: 'ip' },
];

//行数据
var rowData = [
    { name: 'itxst.com', pv: 100, ip: 10 }
];

//多模拟几行数据出来
for (var i = 1; i < 20; i++) {
    rowData.push({ name: 'NO11-' + i, pv: 100 * i, ip: 222 * i });
}
         
//将列和数据赋给gridOptions
var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    getRowStyle: function (params) {
        //********************置顶行样式设置*********************
        if (params.node.rowPinned) {
            return { 'font-weight': 'bold', 'color': 'red' };
        }
    },
    onGridReady: function () {
        //表格创建完成后执行的事件 调整表格大小自适应
        gridOptions.api.sizeColumnsToFit(); 
        //********************设置置顶并统计每行的汇总数据*********************
        count();
    },
    defaultColDef: {
        enableRowGroup: true,
        enablePivot: true,
        enableValue: true,
        sortable: true, //开启排序
    }
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});
//********************设置置顶并统计每行的汇总数据*********************
function count() {
    var pvCount = 0;
    var ipCount = 0;
    for (var i = 0; i < rowData.length; i++) {
        pvCount = pvCount + rowData[i].pv;
        ipCount = ipCount + rowData[i].ip;
    }

    var topRows = [
        { name: '合计', pv: pvCount, ip: ipCount }
    ];
    gridOptions.api.setPinnedTopRowData(topRows);
}

在线试一试

完整例子

<!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 setPinnedTopRowData例子</title>
    <script src="https://www.itxst.com/package/ag-grid/ag-grid-community.js"></script>
    <link href="https://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet" />
</head>
<body>
    <div id="myGrid" style="width: 100%;height: 300px;" class="ag-theme-balham"></div>
    <script>
//定义表格列
var columnDefs = [
    { headerName: '名称', field: 'name', 'pinned': 'left' },
    { headerName: 'PV', field: 'pv' },
    { headerName: 'IP', field: 'ip' },
];


//行数据
var rowData = [
    { name: 'itxst.com', pv: 100, ip: 10 }
];


//多模拟几行数据出来
for (var i = 1; i < 20; i++) {
    rowData.push({ name: 'NO11-' + i, pv: 100 * i, ip: 222 * i });
}
         
//将列和数据赋给gridOptions
var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    getRowStyle: function (params) {
        //********************置顶行样式设置*********************
        if (params.node.rowPinned) {
            return { 'font-weight': 'bold', 'color': 'red' };
        }
    },
    onGridReady: function () {
        //表格创建完成后执行的事件 调整表格大小自适应
        gridOptions.api.sizeColumnsToFit(); 
        //********************设置置顶并统计每行的汇总数据*********************
        count();
    },
    defaultColDef: {
        enableRowGroup: true,
        enablePivot: true,
        enableValue: true,
        sortable: true, //开启排序
    },
   pagination: true,  //开启分页(前端分页)
   paginationAutoPageSize: true, //根据网页高度自动分页(前端分页)
};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});
//********************设置置顶并统计每行的汇总数据*********************
function count() {
    var pvCount = 0;
    var ipCount = 0;
    for (var i = 0; i < rowData.length; i++) {
        pvCount = pvCount + rowData[i].pv;
        ipCount = ipCount + rowData[i].ip;
    }


    var topRows = [
        { name: '合计', pv: pvCount, ip: ipCount }
    ];
    gridOptions.api.setPinnedTopRowData(topRows);
}
    </script>
</body>
</html>
Catalog
ag-grid中文教程 ag-grid vue ag-grid vue入门教程 umd浏览器版用法 vue全选反选 vue插入数据新增行 常用功能 ag-grid多表头 ag-grid固定列 ag-grid拖动宽度和位置 ag-grid数据刷选器 ag-grid编辑表格 ag-gird设置 ag-grid定义列 ag-grid 定义列宽 ag-grid设置行高列宽 ag-grid设置选择行 ag-grid设置复选框 ag-grid置顶合计行 ag-grid底部合计行 ag-grid行组 ag-grid客户端排序 ag-grid方法 setRowData重设表格行数据 ag-grid增加删除修改行 ag-grid全选反选 sizeColumnsToFit自适应大小 setColumnDefs新增列 setRowData插入新行 setPinnedTopRowData设置置顶行 setPinnedBottomRowData设置底部汇总行 forEachNode遍历行对象 getPinnedTopRowCount置顶行数 getPinnedBottomRow底部合计 getRowNode获取行对象 refreshCells刷新更新数据 ag-grid单元格焦点 ag-grid事件 onRowClicked行点击事件 onCellClicked单击单元格事件 onCellDoubleClicked双击单元格事件 ag-grid全部事件列表