javascript 如何在ag-grid中禁用单元格选择?

jc3wubiy  于 2023-01-07  发布在  Java
关注(0)|答案(8)|浏览(342)

我在一个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
下面是我不想在本栏看到的蓝色边框截图:

qlckcl4x

qlckcl4x1#

注意,如果我们设置gridOption.suppressCellSelection = true,我们可以禁用所有列单元格的单元格选择。
这里的问题是关于在选中特定列的单元格时不显示该单元格的突出显示边框。
您可以通过CSS和ColDefcellClass属性来实现这一点。
你需要添加下面的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
这将不会显示边框的单元格,你甚至焦点使用鼠标点击。

jjjwad0x

jjjwad0x2#

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

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

syqv5f0l3#

你可以试试这个css黑客.没有自定义标志需要.

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

示例-https://stackblitz.com/edit/aggrid-want-to-disable-cell-selection-answer?file=src%2Fstyles.css

55ooxyrt

55ooxyrt4#

您也可以使用cellStyle来动态删除选择。下面是一个示例:

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

现场演示

abithluo

abithluo5#

试试这个,对我很管用

::ng-deep .ag-cell-focus,.ag-cell-no-focus{
border:none !important;
}
::ng-deep .no-border.ag-cell:focus{
border:none !important;
outline: none;
}
b5buobof

b5buobof6#

你可以试试这个,如果你想把它涂在所有的细胞上,对我很有效.

.ag-cell-focus,.ag-cell-no-focus{
  border: 1px solid transparent !important;
}

::ng-deep .ag-cell:focus{
  border: 1px solid transparent !important;
  outline: none;
}
j9per5c4

j9per5c47#

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

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

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

xoefb8l8

xoefb8l88#

这些工作人员
将此行添加到相同的 prop className ="ag-theme-alpine"中. ag-cell-focus,. ag-cell-no-focus {border:无!重要; }/此CSS将不对具有"no-border"类的列应用边框/. no-border. ag-cell:focus {border:无!重要;概要:无;}

相关问题