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

【问题标题】：How to disable selection of cells in ag-grid?如何禁用 ag-grid 中的单元格选择？
【发布时间】：2018-11-24 11:57:34
【问题描述】：

我在 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。

这是我不想在本专栏看到的蓝色边框的截图：

【问题讨论】：

请帮助stackoverflow.com/questions/65018177/…

标签： angular ag-grid ag-grid-angular ag-grid-ng2

【解决方案1】：

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

这里的问题是关于在选择特定列的单元格时不显示其突出显示的边框。

你可以通过ColDef的cellClass属性和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
这不会显示您甚至使用鼠标单击聚焦的单元格的边框。

【讨论】：

我很高兴它有帮助！共享重现的问题时，可以快速提供帮助。
为什么不在 gridOptions 中suppressCellSelection？
PO 只想为单个列禁用它。不适用于所有列。问题是从导航中抑制的选定单元格的样式
对我来说，它只在 .no-border.ag-cell:focus 之前与 ::ng-deep 一起使用。感谢您的回答！
这会阻止以可见的方式进行选择，但网格 api 仍会考虑选中的单元格。

【解决方案2】：

我建议在 gridOptions 中使用suppressCellSelection 选项。我不建议使用 CSS 快速修复。

this.gridOptions = {
  // Your grid options here....
  suppressCellSelection: true
};

【讨论】：

该选项已在我的网格选项中设置。它没有帮助。
@ChrisFarmer 确保 enableRangeSelection 为 false
感谢我的工作！！
太棒了，为我一起解决了 10 个问题：D。仅供未来访问者使用：请注意，在较新版本的 AG Grid 中，它已替换为 suppressCellFocus（自 v27.0 起）。

【解决方案3】：

你可以试试这个 css hack。不需要自定义标志。

.ag-cell-focus, .ag-cell {
    border: none !important;
}

示例 - https://stackblitz.com/edit/aggrid-want-to-disable-cell-selection-answer?file=src%2Fstyles.css

【讨论】：

这只会删除突出显示。保留了键盘导航行为，因此如果您的表格水平滚动，您会使用左右箭头键获得奇怪的行为。
这篇文章回答了 OP 的问题，因为 OP 说“在选择过程中简单地删除默认的蓝色轮廓也可以”。它正是这样做的。令人惊讶的是，这被否决了。

【解决方案4】：

试试这个对我有用

::ng-deep .ag-cell-focus,.ag-cell-no-focus{
border:none !important;
}
::ng-deep .no-border.ag-cell:focus{
border:none !important;
outline: none;
}

【讨论】：

【解决方案5】：

您还可以使用cellStyle 动态删除选择。这是一个例子：

{
  headerName: "Is Selectable",
  cellStyle: (params) => {
    if (!params.value) {
      return { border: "none" };
    }
    return null;
  },
  ...
},
{
  headerName: "UnSelectable",
  cellStyle: { border: "none" },
  ...
}

现场演示

【讨论】：

【解决方案6】：

如果你想在所有单元格上应用它，你可以试试这个。它对我有用。

.ag-cell-focus,.ag-cell-no-focus{
  border: 1px solid transparent !important;
}

::ng-deep .ag-cell:focus{
  border: 1px solid transparent !important;
  outline: none;
}

【讨论】：

【解决方案7】：

AG Grid 支持为大多数主题自定义 CSS 变量。尝试在网格容器或任何父级上定义选择边框颜色。

--ag-range-selection-border-color: transparent;

AG Grid: Setting colour parameters using CSS variables

【讨论】：