在 Ag-grid 中禁用复选框选择

Posted 2023-03-28

【中文标题】在 Ag-grid 中禁用复选框选择

【英文标题】：disable checkbox selection in Ag-grid

【发布时间】：2018-09-18 18:10:57

【问题描述】：

是否可以通过保留一些带有某些约束的选定行来禁用复选框选择？ 我不想让用户取消选择渲染时选择的行。

我找到了this.gridOptions.suppressCellSelection = true;，但这只是隐藏了复选框，而我需要在禁用模式下显示复选框。

谢谢。

【问题讨论】：

从未使用过这个库，但看起来您必须为要禁用的每一行添加一些属性，而不是寻找网格范围的解决方案。

这些复选框被渲染，但 ag-grid 实现。所以想如果有一个api那么它很容易。

为了将来参考，这里是disabling checkbox in ag-grid的完整信息。

【参考方案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);

【参考方案2】：

这对我有用

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

【参考方案3】：

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

【讨论】：

我正在使用 ag-grid 内部 api 来呈现复选框而不是 cellRenderer

【参考方案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;
    

【参考方案5】：

纯 CSS 解决方法：

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

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

【参考方案6】：

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

【讨论】：

请多解释一下你的答案。

我更新了代码。我在列定义中添加了内联复选框，它在我的项目中工作。如果我不能解释，你可以问我更多细节。

【参考方案7】：

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

   headerCheckboxSelectionFilteredOnly:true