javascript - 如何禁用 ag-grid 中的单元格选择？

Question

我在 Angular 项目中有一个简单的 ag-grid，我想在其中一列中禁用单元格选择。在选择过程中简单地删除默认的蓝色轮廓也可以。当用户在其中单击时，我只希望单元格没有视觉变化。我该怎么做？

我看到 ColDef 有一个属性 suppressNavigable 有点帮助，因为它不允许使用 tab 键选择单元格，但它仍然允许通过单击进行选择。此外，网格本身似乎提供了 suppressCellSelection，但它似乎不够细化并且似乎不会影响任何东西。

那么，我怎样才能删除这个蓝色边框的单元格选择呢？

这是我对这些列定义的代码:

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,
  }
];

这是一个 stackblitz example我用来测试的。

这是我不想在此列中看到的蓝色边框的屏幕截图:

Answer 1

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.

您可以通过一点 CSS 和 ColDef 的 cellClass 属性来实现这一点。

您需要添加以下 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;
}

并在ColDef中使用与cellClass相同的类

suppressNavigable: true,
cellClass: 'no-border'

实例:aggrid-want-to-disable-cell-selection
这不会显示您甚至使用鼠标单击聚焦的单元格的边框。