我的网格中有一些代码,试图防止双击事件导致树行扩展/折叠,我找不到任何位置的文档。我要这样做的原因是,当我双击该单元格时,我想使其可编辑,但是由于某些技术上的需要,当发生折叠/展开而导致编辑时,我需要运行gridApi.redrawRows()
字段失去焦点,这意味着我永远无法通过双击来实际编辑单元格。
我正在使用以下ag-grid模块版本
"ag-grid-angular": "^22.1.1",
"ag-grid-community": "^22.1.1",
"ag-grid-enterprise": "^22.1.1"
我网格中的相关html看起来像这样
<ag-grid-angular
#agGrid
class="ag-theme-balham"
[modules]="modules"
[columnDefs]="columnDefs"
[rowData]="rowData"
[treeData]="true"
(rowGroupOpened)="onRowGroupOpened($event)"
(cellDoubleClicked)="handleCellDoubleClicked($event)"
[getDataPath]="getDataPath"
[defaultColDef]="defaultColDef"
[frameworkComponents]="frameworkComponents"
[autoGroupColumnDef]="autoGroupColumnDef"
(gridReady)="onGridReady($event)"
[getRowNodeId]="getRowNodeId"
>
</ag-grid-angular>
在我的组件文件中,负责以树格式自动对行进行分组的特定列如下所示:
ngOnInit() {
this.autoGroupColumnDef = {
editable: this.isAllowedtoEdit,
headerName: "Account #",
sortable: true,
lockPosition: true,
resizable: true,
field: "accountNum",
filter: "agGroupCellRenderer",
cellRendererParams: {
suppressCount: true,
innerRenderer: 'AccountNameColumnDisplayer',
},
};
}
处理单元格双击的功能是这样的:
handleCellDoubleClicked(cell) {
if(cell.column.colDef.field === 'accountNum') {
cell.event.stopPropagation();
return false;
}
}
我的handleCellDoubleClicked()
函数似乎没有任何作用。它可以运行,但是当我双击该行时,该行仍会扩展/折叠。
我什至尝试这样做只是为了看看它会做什么,并且这导致了一些非常奇怪的行为的发生
handleCellDoubleClicked(cell) {
if(cell.column.colDef.field === 'accountNum') {
cell.node.setExpanded(false)
}
}
最后,当我尝试专注于
handleCellDoubleClicked(cell) {
if(cell.column.colDef.field === 'accountNum') {
setTimeout(() => {
this.gridApi.startEditingCell({
rowIndex: node.rowIndex,
colKey: 'accountNum'
});
}, 125);
}
}
我在控制台中收到一条警告,告诉我ag-grid无法识别列accountNum
所以我现在有点茫然。有什么我可以做的吗?预先感谢!
答案 0 :(得分:3)
您应该能够在 cellRendererParams 中添加以下属性,以实现此目的:
cellRendererParams: {
...yourOtherParams,
suppressDoubleClickExpand: true
}
干杯!