如何禁用Ag-Grid中的整个列 [英] How to disable entire column in ag-grid

问题描述

我要根据列包含onCellClicked事件的特定条件禁用整个列，但我不希望它触发

I want to disable entire column based on specific condition that column contains onCellClicked event but i don't want it to fire

推荐答案

您必须定义 可编辑 colDef

You have to define editable property in colDef

editable: false <-- edit would be disabled for needed column

已更新

Updated

Header复选框可用于行选择，否则，您应该自己创建自定义处理程序。

Header checkbox can be used for row-selection, for other things, you should create custom handlers by yourself.

要进行显示处理，您需要创建 cellRenderer

For display handling, you need to create cellRenderer

要进行编辑处理，您需要创建自己的 cellEditor

For edit handling, you need to create own cellEditor

基于官方演示：

这里是您的案例的工作示例 演示

cellRenderer -复选框将显示为图标

cellRenderer - checkbox would be displayed as an icon

import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular";

@Component({
    selector: '',
    template: `
    <div class="checkbox-container">
        <span *ngIf="params.value == true" title='true' class='ag-icon ag-icon-tick content-icon'></span>
        <span *ngIf="params.value == false" title='false' class='ag-icon ag-icon-cross content-icon'></span>
        <span *ngIf="!params.value"></span>
    </div>
    `
})
export class CheckboxRendererComponent implements ICellRendererAngularComp {
    private params: any;

    agInit(params: any): void {
        this.params = params;
    }

    refresh(params):boolean{
      return true;
    }
}

cellEditor -双击单元格将提供编辑模式（如果可能的话，基于 colDef - editable 属性）

cellEditor - double click on the cell will provide edit mode (if its possible, based on colDef- editable property)

import {Component} from "@angular/core";
import {ICellEditorAngularComp} from "ag-grid-angular";

@Component({
    selector: '',
    template: `<input type="checkbox"  [(ngModel)]="checkboxValue">`,
})

export class ChekboxEditorComponent implements ICellEditorAngularComp {

    private params: any;
    private checkboxValue:boolean;


    agInit(params: any): void {
        this.params = params;
        this.checkboxValue = this.params.value;
    }

    refresh(params):boolean{
      return true;
    }

    getValue(){
      return this.checkboxValue;
    }
}

最后一件事：
editable：（params）=> {return params.node.data.checkbox！= true}

这里有一种逻辑，该逻辑将对列

here there is a logic which will disable edit mode for true values in column

这篇关于如何禁用Ag-Grid中的整个列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！