代码之家 › 专栏 › 技术社区 › Chris Farmer Marcelo Cantos

如何禁用AG网格中的单元格选择?

ag-grid-ng2 ag-grid angular

Chris Farmer Marcelo Cantos · 技术社区 · 6 年前

我在一个角度项目中有一个简单的ag网格,希望在它的某一列中禁用单元格选择。在选择过程中简单地删除默认的蓝色轮廓也可以。我只希望当用户单击单元格内部时,不会对其进行任何可视更改。我该怎么做?

我看到 coldef has a property suppressnavigable that sort of help,because it disallows using the tab key to select the cells,but it still allows selection by click.此外,网格本身似乎提供了 SuppressCellSelection ,但它似乎不够细化,似乎不会影响任何内容。


   
    
     
      
       
        
         那么,如何删除这个蓝色边框单元格选择?
        
        
         下面是这些列定义的代码:
        
        this.columndefs=[
headername:'one',field:'one',
headername:'two',field:'two',
{
//我要禁用此列中的单元格选择
headername:“我不想选择单元格!”,请
字段:“三”,
可抑制导航:正确,
可编辑:假,
}
](二)
下面是我用来测试的stackblitz示例:
https://stackblitz.com/edit/aggrid want to disable cell selection

以下是我不想在本栏中看到的蓝色边框的屏幕截图:
.

我明白了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

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

2 回复 | 直到 6 年前

Paritosh 6 年前

注意,如果我们设置 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;
}

使用同一类 细胞类 在里面 冷空气

suppressNavigable: true,
cellClass: 'no-border'

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

Ryan Tsui 6 年前

我建议使用 suppressCellSelection GridOptions中的选项。CSS快速修复不是我建议去做的。

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