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

Question

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

我看到ColDef有一个属性suppressNavigable这有点帮助，因为它不允许使用 select 单元格的 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 示例。

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

Answer 1

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

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

您可以通过CSS和位达到这一cellClass财产ColDef 。

您需要添加以下 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
这不会显示您甚至使用鼠标单击聚焦的单元格的边框。

Answer 2

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

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

Answer 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

Answer 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;
}

Answer 5

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

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

现场演示

Answer 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;
}

Answer 7

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

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

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

Answer 8

在网格中简单添加suppressCellSelection={true}以避免单元格选择出现蓝色边框

<Grid
    ref={GridRef}
    columnDefs={Mapper}
    rowData={data}
    gridOptions={gridOptions}
    onGridReady={onGridReady}
    suppressRowHoverHighlight={true}
    columnHoverHighlight={true}
    suppressCellSelection={true} // add this line to avoid blue border color on the cell
    onRowClicked={console.log(e)}
    onFilterChanged={useCallback(() =>
        setRow(GridRef.current.api.getDisplayedRowCount())
    )}
></Grid>

Answer 9

这个工作伙计们
在相同的道具 className="ag-theme-alpine".ag-cell-focus, .ag-cell-no-focus { border: none;important. } /* 这 CSS 是不为具有“无边框”的列应用边框 class */.no-border:ag-cell:focus { border; 无：重要； 大纲：无； }