如何禁用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例子。

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

- Chris Farmer

---

请帮忙：https://stackoverflow.com/questions/65018177/ag-grid-community-infinite-row-model-for-server-side-pagination-community-free/65040658#65040658 - NeverGiveUp161

Answer 1

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

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

您可以通过一些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
即使使用鼠标点击进行聚焦，该单元格也不会显示边框。

---

更新

根据ag-grid 文档和X.Aurther提到的评论，该选项已更名为suppressCellFocus。

- Paritosh

---

对我而言，只有在.no-border.ag-cell:focus之前使用::ng-deep才有效。感谢您的回答！ - Marian Simonca

这样可以以可见的方式防止选择，但是网格API仍将考虑单元格已选择。 - xandermonkey

没问题，只需将 ::ng-deep .ag-cell:focus{ border: none !important; outline: none; } 添加到您的 CSS 中即可。 - takanuva15

suppressClickEdit - Smart Coder

否则，我会设置 border: 1px solid transparent !important;，否则边框会被添加和移除，行的大小也会改变，因此在选择时会出现“跳动”的情况。 - polmonroig

Answer 2

我建议在gridOptions中使用“suppressCellSelection”选项。我不建议采用CSS快速修复方法。

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

如 @aderchox 建议的那样，从 v27.0 开始，该选项已被重命名为 suppressCellFocus。

- Ryan Tsui

---

那个选项已经在我的gridoptions中设置好了，但没有帮助。 - Chris Farmer

@ChrisFarmer 确保 enableRangeSelection 为 false。 - Unicco

工作对我有用，谢谢!! - Sachin

太棒了，你为我一起解决了10个问题 :D。仅供未来的访问者注意，在新版本的AG Grid中，它已被suppressCellFocus替换（自v27.0起）。 - aderchox

Answer 3

您可以尝试使用这个CSS技巧，无需自定义标志。

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

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

这是一个关于IT技术的示例，它涉及到使用CSS来禁用单元格选择。以上是相应的示例代码和图片。

- Jossef Harush Kadouri

---

这只是去除了高亮显示。键盘导航行为保持不变，因此如果您的表水平滚动，左右箭头键会出现奇怪的行为。 - Joshua Wade

这篇文章回答了OP的问题，因为OP说“仅仅在选择期间去掉默认的蓝色轮廓也可以”。而它确实做到了这一点。很惊讶这个被踩了。 - Ross Attrill

Answer 4

您也可以使用cellStyle来动态移除选择。以下是一个示例：

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

在线演示

- NearHuscarl

---

特定单元格的工作解决方案。谢谢：cellStyle: { border: "none" } - LacOniC

Answer 5

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

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

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

- Riti verma

Answer 6

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

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

AG Grid：使用CSS变量设置颜色参数

- Josiah Ruddell

Answer 7

这是关于编程的内容
在同一个props className="ag-theme-alpine"中添加以下行： .ag-cell-focus, .ag-cell-no-focus { border: none !important; } /* 这个CSS是为了不对具有“no-border”类的列应用边框 */ .no-border.ag-cell:focus { border: none !important; outline: none; }

- faery

Answer 8

尝试这个，它对我有效

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

- Afeesudheen