从 AG-Grid 中移除焦点答案

【问题标题】：Remove focus from AG-Grid从 AG-Grid 中移除焦点
【发布时间】：2018-11-13 08:21:57
【问题描述】：

我在网站上使用 AG Grid。当用户单击一个单元格时，它会获得焦点并获得一个蓝色轮廓。

当用户点击网站上的某些其他元素时，我需要移除此焦点，但我不知道该怎么做。是否有为此设置的方法或属性？

【问题讨论】：

【解决方案1】：

将以下 sn-p 添加到您的 css 中

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

示例 - https://next.plnkr.co/edit/xO5N5u84U8n4HgK5

【讨论】：

【解决方案2】：

Angular2+ DEMO

ngAfterViewInit(){
    let body = document.body;
    body.addEventListener("mouseup", (e) => {
      let container = this.agGrid._nativeElement;
        if (!container.contains(e.target)) 
        {
          this.gridApi.clearFocusedCell();
        }
    })
}

JavaScript DEMO

var body = document.body;
body.addEventListener("mouseup", (e) => {
    let gridDiv = document.querySelector('#myGrid')
    if (!gridDiv.contains(e.target)) 
    {
        gridOptions.api.clearFocusedCell();
    }
})

【讨论】：

@iPhoneJavaDev，我想你做错了什么，因为两个样本都按预期工作。
我正在使用 chrome，两个示例仍然显示蓝色边框
所以，一遍又一遍地阅读主要问题，如果仍然不清楚，解决方案是 CLICK-OUTSIDE 网格。（对于您的情况，可以通过 ag-grid 设置配置点击选择）
@un.spike 嗨，当我在 ag 网格中使用 mat select 组件时，这不起作用。示例 - plunker 请更改下拉值，值不会因此而改变。我用过这段代码const body = document.body; body.addEventListener('mouseup', (e) => { const container = this.commonAgGrid.nativeElement; if (!container.contains(e.target)) { this.gridApi.clearFocusedCell(); } });
@VishalMittal 请创建一个新问题并在此处发布链接，因为您的问题有点不同，我想需要不同的解决方案