如何在农业网格中禁用整列

wgx48brx  于 2022-10-24  发布在  Angular
关注(0)|答案(2)|浏览(115)

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

inb24sb2

inb24sb21#

使用gridOptions.isRowSelectable,我们可以将特定行设置为可选或不可选。下面是AG-GRID文档本身的示例。gridOptions.isRowSelectable: function(rowNode) { return rowNode.data ? rowNode.data.year < 2007 : false; }

edqdpe6u

edqdpe6u2#

您必须在colDef中定义editable属性

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

已更新
表头复选框可用于行选择,其他情况下,您应该自己创建自定义处理程序。
对于显示处理,您需要创建cellRenderer
对于编辑处理,您需要创建自己的cellEditor
基于官方演示:
这是为您的箱子DEMO制作的样品
cellRenderer-复选框将显示为图标

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属性)

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}
这里有一个逻辑将禁用columntrue值的编辑模式

相关问题