我在一个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 example。
下面是我不想在本栏看到的蓝色边框截图:
8条答案
按热度按时间qlckcl4x1#
注意,如果我们设置
gridOption.suppressCellSelection = true
,我们可以禁用所有列单元格的单元格选择。这里的问题是关于在选中特定列的单元格时不显示该单元格的突出显示边框。
您可以通过CSS和
ColDef
的cellClass
属性来实现这一点。你需要添加下面的CSS。
并在
ColDef
中使用与cellClass
相同的类示例:aggrid-want-to-disable-cell-selection
这将不会显示边框的单元格,你甚至焦点使用鼠标点击。
jjjwad0x2#
我建议使用gridOptions中的
suppressCellSelection
选项,我不建议使用CSS快速修复。syqv5f0l3#
你可以试试这个css黑客.没有自定义标志需要.
示例-https://stackblitz.com/edit/aggrid-want-to-disable-cell-selection-answer?file=src%2Fstyles.css
55ooxyrt4#
您也可以使用
cellStyle
来动态删除选择。下面是一个示例:现场演示
abithluo5#
试试这个,对我很管用
b5buobof6#
你可以试试这个,如果你想把它涂在所有的细胞上,对我很有效.
j9per5c47#
AG网格支持为大多数主题自定义CSS变量。请尝试在网格容器或任何父级上定义选择边框颜色。
AG Grid:使用CSS变量设置颜色参数
xoefb8l88#
这些工作人员
将此行添加到相同的 prop className ="ag-theme-alpine"中. ag-cell-focus,. ag-cell-no-focus {border:无!重要; }/此CSS将不对具有"no-border"类的列应用边框/. no-border. ag-cell:focus {border:无!重要;概要:无;}