禁用 Ag-grid 中的復選框選擇

Question

是否可以通過保留一些使用某些約束呈現的選定行來禁用復選框選擇？ 我不想讓用戶取消選擇在呈現時選擇的行。

我發現this.gridOptions.suppressCellSelection = true; 但這只是隱藏了復選框，而我需要在禁用模式下顯示復選框。

謝謝。

Answer 1

我通過在 GridOptions 中添加rowClassRules來解決它

            rowClassRules: {
                'ag-row-selected' : function(params) {
                    return params.node.selected === true;
                },
            },

這將添加如下 css 以禁用復選框單擊

.ag-row-selected{
        .ag-cell .ag-cell-wrapper .ag-selection-checkbox .ag-icon-checkbox-checked {
            pointer-events: none;
        }
    }

更新/刷新網格或更新節點時應用 RowClass 規則。 我是通過更新特定節點來做到的

           node.setSelected(true);
           // this is to trigger rowClass for selected/non-selected rows
           // to disable checkbox selection
           node.setData(node.data);

Answer 2

這對我有用

 cellStyle: params => {
          return params.data.myStatus ? {'pointer-events': 'none', opacity: '0.4' }
            : '';
        }

Answer 3

一種方法是向需要實現復選框的列添加一個 cellRenderer 函數。 您可以通過從 cellRenderer 函數返回 true 或 false 來啟用或禁用復選框。

Answer 4

如果您使用內置的agGroupCellRenderer來渲染多選復選框，您可以在決定是否渲染復選框時關閉節點的selectable標志。

cellRenderer: "agGroupCellRenderer",
cellRendererParams: {
    checkbox: function(params) {
        const node = params.node;
        const isGroupRow = node.level === 0; //only show the checkbox on group row.

        if(isGroupRow) {
            params.node.selectable = //your condition whether the rendered checkbox is selectable or not
        }

        return isGroupRow;
    }
}

Answer 5

純 CSS 解決方法：

.ag-selection-checkbox.ag-hidden {
  display: inherit !important;
  opacity: 0.6;
  cursor: not-allowed;
}

這將覆蓋復選框包裝器的 ag-hidden 中的 display:none 配置。

Answer 6

{ headerName: 'IsActive', field: '', editable: false, cellRenderer: params => { return `<input type='checkbox' disabled=true  ${params.data.IsActive ? 'checked' : ''} />`; } }

Answer 7

如果您想在找不到過濾數據時禁用 ag-grid 復選框的標題，那么這可能會有所幫助

   headerCheckboxSelectionFilteredOnly:true 

Answer 8

上面的解決方案有效，但是當用戶單擊標題中的全選或取消全選選項時，這會自動更改

Answer 9

在 28.1.0 版本中，AG 網格添加了顯示禁用復選框的功能。 這里的更新日志https://www.ag-grid.com/changelog/?fixVersion=28.1.0 。 這是官方文檔https://www.ag-grid.com/react-data-grid/row-selection/#example-disabled-checkboxes中的示例 此外，還有一項功能允許選中和禁用復選框。 例如https://www.ag-grid.com/react-data-grid/row-selection/#example-force-enable-checkboxes