ag-grid 组列固定答案

【问题标题】：ag-grid Group Column Pinnedag-grid 组列固定
【发布时间】：2018-07-05 19:33:30
【问题描述】：

我很难在左侧固定一个组列，我想与全世界分享我的解决方案。请参阅 autoGroupColumnDef 部分。希望这会有所帮助！

var columnDefs = [
    { headerName: "Console", field: "console", width: 140, rowGroup: true},
    { headerName: "Alarm Type", field: "AlarmType", width: 20, pivot: true },
    { headerName: "Total", field: "Total", width: 55, aggFunc: 'sum'},
    { headerName: "%", field: "Percentage", width: 50, aggFunc: 'sum', cellRenderer: roundNumber },
    { headerName: "IP", field: "InProgress", width: 45, aggFunc: 'sum', cellRenderer: roundNumber }
];

var gridOptions = {
    groupMultiAutoColumn: true,
    groupDefaultExpanded: -1,
    suppressAggFuncInHeader: true,
    groupSuppressBlankHeader: true,
    pivotMode: true,
    columnDefs: columnDefs,
    enableRangeSelection: true,
    toolPanelSuppressRowGroups: true,
    toolPanelSuppressPivotMode: true,
    toolPanelSuppressPivots: true,
    toolPanelSuppressValues: true,
    autoGroupColumnDef: {
        headerName: 'Consoles',//custom header name for group
        pinned: 'left',//force pinned left. Does not work in columnDef
        cellRendererParams: {
            suppressCount: true,//remove number in Group Column
        }
    }
};

【问题讨论】：

你是我的英雄

标签： ag-grid pinning

【解决方案1】：

为了达到预期的用途，删除 pivotMode: true 的选项会在将列固定到左侧时导致问题

供参考的工作解决方案

var columnDefs = [
    { headerName: "Console", field: "console", width: 140, rowGroup: true},
    { headerName: "Alarm Type", field: "AlarmType", width: 55, pivot: true },
    { headerName: "Total", field: "Total", width: 55, aggFunc: 'sum'},
    { headerName: "%", field: "Percentage", width: 50, aggFunc: 'sum'},
    { headerName: "IP", field: "InProgress", width: 45, aggFunc: 'sum'}
];

var gridOptions = {
   groupMultiAutoColumn: true,
   groupDefaultExpanded: -1,
   suppressAggFuncInHeader: true,
   groupSuppressBlankHeader: true,
   columnDefs: columnDefs,
    enableRangeSelection: true,
    toolPanelSuppressRowGroups: true,
    toolPanelSuppressPivotMode: true,
    toolPanelSuppressValues: true,
    autoGroupColumnDef: {
        headerName: 'Consoles',//custom header name for group
        pinned: 'left',//force pinned left. Does not work in columnDef
        cellRendererParams: {
            suppressCount: true,//remove number in Group Column
        }
    }
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
    var data = [
      {'console': 1, 'AlarmType': 'A', 'Total': 200, 'Percentage': 20, 'InProgress': 123456},
    {'console': 1, 'AlarmType': 'A', 'Total': 200, 'Percentage': 20, 'InProgress': 123456}
    ];
    gridOptions.api.setRowData(data);
});

<!DOCTYPE html>
<html lang="en">
<head>
<script> var __basePath = ''; </script>
<style media="only screen">
    html, body {
        height: 50%;
        width: 60%;
        margin: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }
    html {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        overflow: auto;
    }
    body {
        padding: 1rem;
        overflow: auto;
    }
</style>
<script src='https://unpkg.com/@ag-grid-community/all-modules@22.1.1/dist/ag-grid-community.min.js'></script></head>
<body>

<div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>

    <script src="main.js"></script>
</body>
</html>

Plunker 供参考 - https://plnkr.co/edit/eWc4HsKzLO80vTKtSxQp?p=preview

【讨论】：