Ag-Grid:将列的位置锁定到最后一列
Ag-Grid: lock a column's position to the last column
我想知道是否有一种方法可以有效地锁定 Ag-Grid 中的列,以便无论如何该列始终是最后一列。
背景
我最终要寻找的是如果网格大小大于所有列宽的总和,则避免在最后一列之后出现空白 space。这是为了让网格具有一致、专业的外观,特别是考虑到 even/odd 行通常以不同的颜色呈现。我希望空白 space 也具有交替的背景颜色。
鉴于似乎没有网格属性强制网格将最后的空白space渲染为伪列,因此我正在考虑手动添加一个伪列一种方式:
- 伪列没有header
- 伪列没有数据
- 伪列不可排序(通过
sortable: false
实现)
- 伪列不可手动调整大小(通过
resizable: false
实现)
- 伪列是只有列有
suppressSizeToFit: false
- 将伪列锁定为始终是最后一列,这样用户就无法将列拖到它的右侧
除了上面列表中的最后一项,我已经找到了实现所有功能的方法。我知道我可以 suppressMovable: true
但这只能确保列本身不可拖动,它不会阻止用户将列拖动到它的右侧。
实际上,我正在寻找类似于 lockPosition
的东西,但我不想将列锁定到前面,而是将列锁定到末尾。
What I am ultimately looking for is to avoid the blank space after the last column if the grid size is wider than all column width combined
您可以使用 sizeColumnsToFit()
API 调整列的大小以水平适应网格。使用此 API,最后一列后不会有任何空白 space,但请确保您至少没有指定一列的宽度。这是将 expand/shrink 适合网格大小的列。
在 gridReady
事件触发后调用 sizeColumnsToFit()
。
关注 ag-grid backlog 中当前未解决的 AG-3326 问题 https://www.ag-grid.com/ag-grid-pipeline/
"Allow locking ( lockPosition ) a column to always be either the first or last columns (currently only the first column is supported)"
这是锁定 right-most 列的有效解决方法,直到实施 AG-3326。
onColumnMoved: params => {
const columnCount = params.columnApi.getAllColumns().filter(c => c.isVisible()).length;
const maxIndex = columnCount - 2;
if(params.toIndex > maxIndex) {
params.columnApi.moveColumnByIndex(params.toIndex, maxIndex);
}
}
任何移到 'locked' 列右侧的列都会立即移到 'locked' 列的左侧。
我想知道是否有一种方法可以有效地锁定 Ag-Grid 中的列,以便无论如何该列始终是最后一列。
背景
我最终要寻找的是如果网格大小大于所有列宽的总和,则避免在最后一列之后出现空白 space。这是为了让网格具有一致、专业的外观,特别是考虑到 even/odd 行通常以不同的颜色呈现。我希望空白 space 也具有交替的背景颜色。
鉴于似乎没有网格属性强制网格将最后的空白space渲染为伪列,因此我正在考虑手动添加一个伪列一种方式:
- 伪列没有header
- 伪列没有数据
- 伪列不可排序(通过
sortable: false
实现) - 伪列不可手动调整大小(通过
resizable: false
实现) - 伪列是只有列有
suppressSizeToFit: false
- 将伪列锁定为始终是最后一列,这样用户就无法将列拖到它的右侧
除了上面列表中的最后一项,我已经找到了实现所有功能的方法。我知道我可以 suppressMovable: true
但这只能确保列本身不可拖动,它不会阻止用户将列拖动到它的右侧。
实际上,我正在寻找类似于 lockPosition
的东西,但我不想将列锁定到前面,而是将列锁定到末尾。
What I am ultimately looking for is to avoid the blank space after the last column if the grid size is wider than all column width combined
您可以使用 sizeColumnsToFit()
API 调整列的大小以水平适应网格。使用此 API,最后一列后不会有任何空白 space,但请确保您至少没有指定一列的宽度。这是将 expand/shrink 适合网格大小的列。
在 gridReady
事件触发后调用 sizeColumnsToFit()
。
关注 ag-grid backlog 中当前未解决的 AG-3326 问题 https://www.ag-grid.com/ag-grid-pipeline/
"Allow locking ( lockPosition ) a column to always be either the first or last columns (currently only the first column is supported)"
这是锁定 right-most 列的有效解决方法,直到实施 AG-3326。
onColumnMoved: params => {
const columnCount = params.columnApi.getAllColumns().filter(c => c.isVisible()).length;
const maxIndex = columnCount - 2;
if(params.toIndex > maxIndex) {
params.columnApi.moveColumnByIndex(params.toIndex, maxIndex);
}
}
任何移到 'locked' 列右侧的列都会立即移到 'locked' 列的左侧。