Ag grid 在我的ag网格中使用复选框，后面有布尔字段，并且仅使用键盘选中/取消选中

我的

ag网格中有一些布尔字段。除了可以使用键盘导航外，我还希望可以使用键盘选中/取消选中这些复选框。我的意思是让用户使用光标键在网格内移动，然后当当前单元格是复选框时，只需使用
的
空格
键来选中/取消选中

我以下面显示的解决方案结束，但我很好奇是否有更好的解决方案

我使用的技巧是捕捉网格上的键盘事件，如果聚焦单元格是复选框，则更改值（真/假）

例如：


var columnDefs=[
{标题名称：“运动员”，字段：“运动员”，宽度：150，可编辑：true}，
{headerName:“年龄”，字段：“年龄”，宽度：60，可编辑：true}，
{headerName:“国家”，字段：“国家”，宽度：120，可编辑：true}，
{headerName:“Boo1”，字段：“Boo1”，宽度：60，单元格渲染器：boolRenderer}，
{标题名称：“Boo2”，字段：“Boo2”，宽度：60，单元格渲染器：boolRenderer}
];
函数boolRenderer（参数）{
返回``；
}
变量gridOptions={
columnDefs:columnDefs，
onCellKeyPress:cellKeyPress
}; 
功能单元按键（e）{
让输入_KEY=13；
让空格_KEY=32；
var事件=e.event；
if（event.keyCode==空格| | event.keyCode==输入|键）
{    
var isCheckbox=$（event.target）.find（“输入[type='checkbox']”）。长度>0；
if（isCheckbox）
{
var currentCell=gridOptions.api.getFocusedCell（）；
var rowIndex=currentCell.rowIndex；
var colId=currentCell.column.getId（）；
var rowNode=gridOptions.api.getDisplayedRowatinex（rowIndex）；
var cellValue=gridOptions.api.getValue（colId，rowNode）| | false；
rowNode.setDataValue（colId，！cellValue）；
}
}
}
//在页面完成加载后设置网格
document.addEventListener（'DOMContentLoaded'，function（）{
var gridDiv=document.querySelector（“#myGrid”）；
新的agGrid.Grid（gridDiv，gridOptions）；
//执行http请求以获取示例数据-不使用任何框架来保持示例的自包含性。
//您可能会使用JQuery、Angular或其他框架来执行HTTP调用。
var httpRequest=new XMLHttpRequest（）；
httpRequest.open（'GET'，'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json');
httpRequest.send（）；
httpRequest.onreadystatechange=函数（）{
if（httpRequest.readyState==4&&httpRequest.status==200）{
var httpResult=JSON.parse（httpRequest.responseText）；
gridOptions.api.setRowData（httpResult）；
}
};
});

。测试容器{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}

var_u_basePath=''；
html，正文{
身高：100%；
宽度：100%；
保证金：0；
框大小：边框框；
-webkit溢出滚动：触摸；
}
html{
位置：绝对位置；
排名：0；
左：0；
填充：0；
溢出：自动；
}
身体{
填充：1rem；
溢出：自动；
}
如果您询问其他方法，这是我的建议

您可以在columnDefs中尝试agSelectCellEditor，用户仍可以通过按enter键使用键盘更改它，并使用箭头键选择true或false

this.columnDefs = [
  {
    headerName: 'ID',
    field: 'id',
    width: 50
  },
    headerName: 'IsCompleted',
    field: 'isCompleted',
    editable: true,
    filter: true,
    sortable: true,
    cellEditor: "agSelectCellEditor",
    cellEditorParams:
      {
        values: ["True", "False"]
      },
    width: 105}
   ]

要在服务器端保存更改，请执行以下操作：

(cellEditingStopped)="UpdateTrainingData()" //as an example your ag-grid html tag.

我想使用复选框而不是选择列表。无论如何，谢谢。在您的演示中，单击复选框不会更新基础值。你已经在你的真实代码中处理过这个问题了吗？我想你用谷歌Chrome的其他东西测试过了吧？你说得对：在使用（例如）MicrosoftEdge进行测试时，出现了一个bug。现在可以了。我更新了上面的代码。该错误是在使用键盘检查/取消选中时发生的。密钥码在GC和Edge之间的管理方式不同。我最初的问题仍然是：“有更好的解决方案吗？”没有，我用的是Chrome。我的意思是：真正的用户有时也会单击复选框，而当前代码（甚至更新的代码）中没有任何内容可以处理这种情况。您通常不希望为按键/单击绑定不同的事件，而是希望有一个中心功能。因此，我问您是否已经有了处理鼠标点击事件的代码。这是找到更好解决方案的一部分。嗯，也许你从未使用过
Aurelia
框架。
columnDefs
中的每一列都绑定到一个
字段
。因此，每当您单击复选框时，Aurelia都会非常聪明地更改后面字段的值。唯一没有自动管理（由Aurelia管理）的是密钥处理，这就是为什么我必须手动操作的原因。同时，我再次更新了代码，以获得更通用的解决方案，但仍然想知道是否有人有更好的解决方案。查看此处：。该演示已经可以与单击和键盘导航一起使用。也许您没有使用相同类型的绑定？或者，如果是，您可能希望触发一些Aurelia事件，而不是使用
.setDataValue
“手动”设置它？不过我不会太担心这个问题，看起来你已经有了一个不错的解决方案。如果您确实想要一个更好的解决方案，那么最好首先说明您正在使用Aurelia。但也许你不会得到任何反馈，因为它不太受欢迎。不管怎样，祝你好运。