关键词：
【中文标题】Ag-grid：使用“agSelectCellEditor”时清除单元格【英文标题】：Ag-grid: clear cell when "agSelectCellEditor" is used 【发布时间】：2021-04-16 06:04:27 【问题描述】：如 ag-grid documentation 中所述：
如果 Backspace 或 删除被按下。
但这在使用“agSelectCellEditor”时不起作用。如果您按 Delete 或 Backspace，单元格将进入 EDIT 模式，您只能选择作为选项提供的值。
知道如何实现相同的行为吗？
【问题讨论】：
如果您使用的是社区版本，您可以通过stackblitz展示示例吗？ 【参考方案1】：我发现一篇文章解释了如何编写删除单元格逻辑。这也适用于多个单元格。请查看这篇文章：https://blog.ag-grid.com/deleting-selected-rows-and-cell-ranges-via-key-press/
基本上，您可以在我们的默认列定义中使用 suppressKeyboardEvent 回调来覆盖 DELETE 或 BACKSPACE 键的默认行为：
defaultColDef:
suppressKeyboardEvent: params =>
if (!params.editing)
let isBackspaceKey = params.event.keyCode === 8;
let isDeleteKey = params.event.keyCode === 46;
if (isBackspaceKey || isDeleteKey)
params.api.getCellRanges().forEach(range =>
let colIds = range.columns.map(col => col.colId);
let startRowIndex = Math.min(
range.startRow.rowIndex,
range.endRow.rowIndex
);
let endRowIndex = Math.max(
range.startRow.rowIndex,
range.endRow.rowIndex
);
clearCells(startRowIndex, endRowIndex, colIds, params.api);
return false;
以及删除方法：
function clearCells(start, end, columns, gridApi)
let itemsToUpdate = [];
for (let i = start; i <= end; i++)
let data = gridApi.rowModel.rowsToDisplay[i].data;
columns.forEach(column =>
data[column] = "";
);
itemsToUpdate.push(data);
gridApi.applyTransaction( update: itemsToUpdate );
这按预期工作。
【讨论】：
将 ag-grid 与 flexbox 一起使用
】将ag-grid与flexbox一起使用【英文标题】：Usingag-gridwithflexbox【发布时间】：2019-04-0722:23:57【问题描述】：我一直在尝试将ag-grid与flex布局一起使用，但它似乎没有按预期工作。以下stackblitz有一个可重现的示例：https://stackblitz.com/... 查看详情
ag-Grid，使用材质图标进行单元格渲染 - vue
】ag-Grid，使用材质图标进行单元格渲染-vue【英文标题】：ag-Grid,cellrenderingwithmaterial-icons-vue【发布时间】：2021-03-1515:35:27【问题描述】：我在vuejs项目中使用ag-Grid。我想渲染单元格以显示材质图标，但是图标没有出现，只出现了... 查看详情
ag-grid：使用 domLayout='autoHeight' 时是不是可以有固定的标题？
】ag-grid：使用domLayout=\\\'autoHeight\\\'时是不是可以有固定的标题？【英文标题】：ag-grid:isitpossibletohavefixedheaderswhenusingdomLayout=\'autoHeight\'?ag-grid：使用domLayout=\'autoHeight\'时是否可以有固定的标题？【发布时间】：2018-11-1921:57:19【问... 查看详情
Ag-grid：使用“agSelectCellEditor”时清除单元格
】Ag-grid：使用“agSelectCellEditor”时清除单元格【英文标题】：Ag-grid:clearcellwhen"agSelectCellEditor"isused【发布时间】：2021-04-1606:04:27【问题描述】：如ag-griddocumentation中所述：如果Backspace或删除被按下。但这在使用“agSelectCell... 查看详情
使用 getDataAsExcel 导出 AG-Grid
】使用getDataAsExcel导出AG-Grid【英文标题】：AG-GridexportusinggetDataAsExcel【发布时间】：2021-05-0712:28:56【问题描述】：我正在使用ag网格导出引用this链接的表。我们可以使用exportDataAsExcel方法导出，下载的excel表格的表格名称为aggrid。... 查看详情
如何使用 ag-grid 创建树视图
】如何使用ag-grid创建树视图【英文标题】：Howtocreateatreeviewwithag-grid【发布时间】：2019-06-0722:12:15【问题描述】：columnDefs如下columnDefs=[headerName:\'question\',field:\'questionId\',rowGroup:true,headerName:\'type\',field:\'type\',headerName:\'an 查看详情
为啥没有使用 vuejs 将新行添加到 ag-grid？
】为啥没有使用vuejs将新行添加到ag-grid？【英文标题】：Whyarenewrowsnotbeingaddedtoag-gridusingvuejs?为什么没有使用vuejs将新行添加到ag-grid？【发布时间】：2020-12-1018:12:31【问题描述】：我在一个vue.js应用程序中有一个ag-grid组件，声明... 查看详情
在两个单独的 ag-Grid 上使用 ag-Grid 的 sizeColumnsToFit() 时警告“网格零宽度”，由选项卡菜单显示
】在两个单独的ag-Grid上使用ag-Grid的sizeColumnsToFit()时警告“网格零宽度”，由选项卡菜单显示【英文标题】：Warning\'gridzerowidth\'whenusingag-Grid\'ssizeColumnsToFit()ontwoseparateag-Grids,displayedbyatabmenu【发布时间】：2019-05-3023:18:50【问题描述... 查看详情
如何在 Nuxt 应用程序中使用 ag-grid
】如何在Nuxt应用程序中使用ag-grid【英文标题】：Howtouseag-gridinaNuxtapp【发布时间】：2018-07-2922:57:34【问题描述】：我正在构建一个Nuxt应用程序，并试图在我的一个页面中呈现一个ag-grid我创建了一个名为ag-grid.js的插件：import*asagG... 查看详情
您如何在 ag-grid 模块中使用多个组件？
】您如何在ag-grid模块中使用多个组件？【英文标题】：howdoyouusemultiplecomponentsinanag-gridmodule?【发布时间】：2021-02-1207:45:47【问题描述】：我正在尝试使用ag-grid和模块将数据集放在单独的组件上。与教程相反，它显示仅在应用程... 查看详情
Angular & ag-grid：无法使用 frameworkComponents 注册框架组件
】Angular&ag-grid：无法使用frameworkComponents注册框架组件【英文标题】：Angular&ag-grid:cannotregisterframeworkcomponentusingframeworkComponents【发布时间】：2019-11-0903:38:12【问题描述】：作为Angular应用程序的一部分，我正在开发一个基于ag... 查看详情
使用 Javascript 隐藏或折叠 ag-grid 中的单个特定行
】使用Javascript隐藏或折叠ag-grid中的单个特定行【英文标题】：HideorCollapseasinglespecificrowinag-gridusingJavascript【发布时间】：2021-10-1914:32:56【问题描述】：在没有任何特定解决方案的情况下在SO中进行了大量搜索后，我不得不问这个... 查看详情
使用 ag-grid 和 angular 2 时发送多个请求
】使用ag-grid和angular2时发送多个请求【英文标题】：sendingmultiplerequestswhenusingag-gridandangular2【发布时间】：2017-12-0315:25:27【问题描述】：我正在从ASP.NETWebapi检索数据并在Angular2应用程序中填充ag-grid。数据在ag-grid中填充，但我注... 查看详情
使用 React 加载新表后使用新数据更新 ag-grid
】使用React加载新表后使用新数据更新ag-grid【英文标题】：Updatingag-gridwithnewdataafternewtableloadwithReact【发布时间】：2020-11-0719:07:45【问题描述】：我正在使用React，并且我有一个更新Redux表状态的导航组件。根据导航中选择的表格... 查看详情
如何使用空标题名称对 AG-Grid 中的列进行排序
】如何使用空标题名称对AG-Grid中的列进行排序【英文标题】：HowtosortcolumninAG-GridwithemptyHeaderName【发布时间】：2019-12-0312:01:54【问题描述】：如何在AG-Grid中使用空Header对列进行排序？正在传递的colDef：varcolumnDefs=[headerName:"",sortabl... 查看详情
在 SharePoint 框架 (SPFX) / Angular 中使用 ag-Grid - 样式失败
】在SharePoint框架(SPFX)/Angular中使用ag-Grid-样式失败【英文标题】：Usingag-GridwithinSharePointFramework(SPFX)/Angular-stylingfailure【发布时间】：2021-04-0613:09:31【问题描述】：我们正在探索使用带有Angular元素的SharePoint框架(SPFX)的自定义SharePoi... 查看详情
使用 Angular 2 最新版本的 ag-grid 中的货币格式
】使用Angular2最新版本的ag-grid中的货币格式【英文标题】：CurrencyFormatinag-gridusingangular2latestversion【发布时间】：2016-10-2109:21:57【问题描述】：我在我的ag-grid项目中显示货币计算，但我试图以美国货币格式设置货币值（如232,345）... 查看详情
使用 ag-Grid 为每一行添加唯一的 id
】使用ag-Grid为每一行添加唯一的id【英文标题】：Adduniqueidtoeveryrowusingag-Grid【发布时间】：2019-11-1406:29:35【问题描述】：我在我的网格中使用了javascript中的ag-Grid插件。我的问题是弄清楚如何将行更新到数据库中。如何为每一行... 查看详情