ag-grid 组列固定
Posted
技术标签:
【中文标题】ag-grid 组列固定【英文标题】：ag-grid Group Column Pinned 【发布时间】：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
;
【问题讨论】：
你是我的英雄 【参考方案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
【讨论】：
以上是关于ag-grid 组列固定的主要内容，如果未能解决你的问题，请参考以下文章