我想根据列包含onCellClicked事件的特定条件禁用整个列,但我不希望触发它
inb24sb21#
使用gridOptions.isRowSelectable,我们可以将特定行设置为可选或不可选。下面是AG-GRID文档本身的示例。gridOptions.isRowSelectable: function(rowNode) { return rowNode.data ? rowNode.data.year < 2007 : false; }
gridOptions.isRowSelectable
gridOptions.isRowSelectable: function(rowNode) { return rowNode.data ? rowNode.data.year < 2007 : false; }
edqdpe6u2#
您必须在colDef中定义editable属性
colDef
editable
editable: false <-- edit would be disabled for needed column
已更新表头复选框可用于行选择,其他情况下,您应该自己创建自定义处理程序。对于显示处理,您需要创建cellRenderer对于编辑处理,您需要创建自己的cellEditor基于官方演示:这是为您的箱子DEMO制作的样品cellRenderer-复选框将显示为图标
cellRenderer
cellEditor
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}这里有一个逻辑将禁用column中true值的编辑模式
editable: (params)=>{return params.node.data.checkbox != true}
column
true
2条答案
按热度按时间inb24sb21#
使用
gridOptions.isRowSelectable
,我们可以将特定行设置为可选或不可选。下面是AG-GRID文档本身的示例。gridOptions.isRowSelectable: function(rowNode) { return rowNode.data ? rowNode.data.year < 2007 : false; }
edqdpe6u2#
您必须在
colDef
中定义editable
属性已更新
表头复选框可用于行选择,其他情况下,您应该自己创建自定义处理程序。
对于显示处理,您需要创建
cellRenderer
对于编辑处理,您需要创建自己的
cellEditor
基于官方演示:
这是为您的箱子DEMO制作的样品
cellRenderer
-复选框将显示为图标cellEditor
-双击单元格将提供编辑模式(如果可能,基于colDef
-editable
属性)最后一件事:
editable: (params)=>{return params.node.data.checkbox != true}
这里有一个逻辑将禁用
column
中true
值的编辑模式