如何禁用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示例： https://stackblitz.com/edit/aggrid-want-to-disable-cell-selection

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

Answer 1

  

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

     

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

您可以通过CSS和cellClass的{​​{1}}属性实现此目的。

您需要在CSS下面添加。

ColDef

在.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; }

中使用与cellClass相同的课程

ColDef

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

Answer 2

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

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

Answer 3

试试这个对我有用

::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 4

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

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

实时演示

Answer 5

您可以尝试使用此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 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;
}