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

w6mmgewl  于 2022-12-25  发布在  Java
关注(0)|答案(8)|浏览(454)

是否可以通过保留某些约束条件下呈现的选定行来禁用复选框选择?2我不想允许用户取消选择呈现时选定的行。
我发现this.gridOptions.suppressCellSelection = true;,但这只是隐藏复选框,而我需要显示在禁用模式的复选框。
谢谢。

bweufnob

bweufnob1#

我通过在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);
a1o7rhls

a1o7rhls2#

这对我很有效

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

ulmd4ohb3#

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

xeufq47z

xeufq47z4#

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

swvgeqrz5#

纯CSS解决方案:

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

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

lp0sw83n

lp0sw83n6#

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

pb3s4cty7#

如果要在筛选器数据未找到时禁用ag-grid复选框的标题,则此操作可能会有所帮助

headerCheckboxSelectionFilteredOnly:true
dpiehjr4

dpiehjr48#

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

相关问题