如何禁用 ag-grid 中的單元格選擇？

Question

我在 Angular 項目中有一個簡單的 ag-grid，我想禁用其中一列中的單元格選擇。 在選擇過程中簡單地刪除默認的藍色輪廓也可以。 當用戶在其中單擊時，我只希望單元格沒有視覺變化。 我怎樣才能做到這一點？

我看到ColDef有一個屬性suppressNavigable這有點幫助，因為它不允許使用 select 單元格的 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 示例。

這是我不想在此欄中看到的藍色邊框的屏幕截圖：

Answer 1

請注意，如果我們設置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;
}

並在ColDef使用與cellClass相同的類

suppressNavigable: true,
cellClass: 'no-border'

實例： aggrid-want-to-disable-cell-selection
這不會顯示您甚至使用鼠標單擊聚焦的單元格的邊框。

Answer 2

我建議在gridOptions 中使用suppressCellSelection選項。 我不建議使用 CSS 快速修復。

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

Answer 3

你可以試試這個 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 4

試試這個對我有用

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

您還可以使用cellStyle動態刪除選擇。 下面是一個例子：

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

現場演示

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

Answer 7

AG Grid 支持為大多數主題自定義 CSS 變量。 嘗試在網格容器或任何父級上定義選擇邊框顏色。

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

AG Grid：使用 CSS 變量設置顏色參數

Answer 8

在網格中簡單添加suppressCellSelection={true}以避免單元格選擇出現藍色邊框

<Grid
    ref={GridRef}
    columnDefs={Mapper}
    rowData={data}
    gridOptions={gridOptions}
    onGridReady={onGridReady}
    suppressRowHoverHighlight={true}
    columnHoverHighlight={true}
    suppressCellSelection={true} // add this line to avoid blue border color on the cell
    onRowClicked={console.log(e)}
    onFilterChanged={useCallback(() =>
        setRow(GridRef.current.api.getDisplayedRowCount())
    )}
></Grid>

Answer 9

這個工作伙計們
在相同的道具 className="ag-theme-alpine".ag-cell-focus, .ag-cell-no-focus { border: none;important. } /* 這 CSS 是不為具有“無邊框”的列應用邊框 class */.no-border:ag-cell:focus { border; 無：重要； 大綱：無； }