禁用 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

纯 CSS 解决方法：

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

这将覆盖复选框包装器的ag-hidden中的display:none配置。

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

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

Answer 6

如果您想在找不到过滤器数据时禁用 ag-grid 复选框的标题，那么这可能会有所帮助

   headerCheckboxSelectionFilteredOnly:true 

Answer 7

上述解决方案有效，但当用户单击标题中的“全选”或“取消全选”选项时，此解决方案会自动更改

Answer 8

AG grid 在 28.1.0 版本中添加了显示禁用复选框的功能。 此处的更改日志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

Answer 9

一种方法是在需要实现复选框的列中添加 cellRenderer 函数。您可以通过从 cellRenderer 函数返回 true 或 false 来启用或禁用该复选框。