我想根据该列包含 onCellClicked 事件的特定条件禁用整个列,但我不希望它触发
使用
gridOptions.isRowSelectable
我们可以将特定行设置为可选择或不可选择。以下是 ag-grid 文档本身的示例。
gridOptions.isRowSelectable: function(rowNode) {
return rowNode.data ? rowNode.data.year < 2007 : false;
}
您必须在 editable
colDef
属性
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}
这里有一个逻辑将禁用
true
中
column
值的编辑模式