如何禁用ag-grid中的单元格选择？ [英] How to disable selection of cells in ag-grid?

问题描述

我在Angular项目中有一个简单的ag-grid，想禁用其某一列中的单元格选择。在选择过程中只需删除默认的蓝色轮廓也可以。我只希望在用户单击单元格时不对单元格进行任何视觉更改。我该怎么做？

我看到 ColDef 的属性为 suppressNavigable 之类的帮助，因为它不允许使用Tab键选择单元格，但仍然允许通过单击进行选择。此外，网格本身似乎提供了 suppressCellSelection ，但它似乎不够细化，似乎也没有任何影响。

那么，如何删除该蓝色边框单元格呢？

这是这些列的代码定义：

  this.columnDefs = [
 {headerName：'One'，field：'one'}，
 {headerName：'Two'，field：'two'}，
 {
 //我想禁用此列中的单元格选择
 headerName：'我不希望任何单元格选择！'，
字段：三，
抑制可导航：true，
可编辑：false，
} 
]; 
  

这是我用来测试的示例stackblitz：

解决方案

请注意，如果我们设置 gridOption .suppressCellSelection = true 我们可以为所有列的单元格禁用单元格选择。

这里的问题是选择特定列时未显示该单元格的突出显示边框。

您可以通过CSS和 ColDef 的 cellClass 属性来实现此目的。

您需要在CSS下方添加。

  .ag -cell-focus，.ag-cell-no-focus {
 border：none！important; 
} 
 / *此CSS不适用于具有'noborder'类的列的边框* / 
 .no-border.ag-cell：focus {
边界：无重要！ 
大纲：无； 
} 
  

并使用与 cellClass ColDef

中的c $ c>

  suppressNavigable：true，
 cellClass：'无边界'
  

实时示例： aggrid-want-to-disable-cell-selection

这不会显示您甚至使用鼠标单击即可聚焦的单元格的边框。

I have a simple ag-grid in an Angular project and want to disable selection of cells in one of its columns. Simply removing the default blue outline during selection would also be fine. I just want no visual change to the cell when the user clicks inside it. How can I do this?

I see that ColDef has a property suppressNavigable that sort of helps, since it disallows using the tab key to select the cells, but it still allows selection by clicking. Also, the grid itself seems to offer suppressCellSelection but it doesn't seem granular enough and doesn't seem to affect anything anyway.

So, how can I remove this blue border cell selection?

Here's the code I have for these column definitions:

this.columnDefs = [
  { headerName: 'One', field: 'one' },
  { headerName: 'Two', field: 'two' },
  { 
    // I want to disable selection of cells in this column
    headerName: 'I want no cell selection!', 
    field: 'three',   
    suppressNavigable: true,
    editable: false,
  }
];

Here's an example stackblitz I was using to test with: https://stackblitz.com/edit/aggrid-want-to-disable-cell-selection

Here's a screenshot of the blue border I don't want to see in this column:

解决方案

Note that if we set gridOption.suppressCellSelection = true we can disable cell selection for all columns' cells.

Here the question is regarding not showing a specific column's cell's highlighted border when it is selected.

You can achieve this by bit of CSS and cellClass property of ColDef.

You'll need to add below CSS.

.ag-cell-focus,.ag-cell-no-focus{
  border:none !important;
}
/* This CSS is to not apply the border for the column having 'no-border' class */
.no-border.ag-cell:focus{
  border:none !important;
  outline: none;
}

And use the same class as cellClass in ColDef

suppressNavigable: true,
cellClass: 'no-border'

Live example: aggrid-want-to-disable-cell-selection
This won't show border for the cell you even focus using mouse click.

这篇关于如何禁用ag-grid中的单元格选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！