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

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

Answer 3

如果您使用内置的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 4

这对我有用

UPDATE

Answer 5

纯CSS解决方法：

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

这将覆盖复选框包装程序的ag隐藏的display：none配置。