时间戳

首页 > 解决方案 > Angular-Slickgrid Select 或 Multiselect 下拉菜单在第一次单击时闪烁（自动关闭）

angular-slickgrid - Angular-Slickgrid Select 或 Multiselect 下拉菜单在第一次单击时闪烁（自动关闭）

问题描述

以下是我正在使用的代码

1.我在 angular slickgrid 表中添加了一个新行，代码如下 const newItem = { id: this.dataset.length + this.index, roleName: '' };

// add the item to the grid
this.angularGrid.gridService.addItem(newItem);
  1. 以下是列定义

this.columnDefinitions = [ { id: 'roleName', name: 'Role *', field: 'roleName', sortable: true, type: FieldType.string, filterable: true, width: 80, editor: { model: Editors. singleSelect, enableRenderHtml: true, collection: ['1','2', '3'], placeholder: '选择一个选项', collectionSortBy: { property: 'label' }, } } ]

3.GridOptions有：

this.gridOptions = { enableAutoResize: true,
enableCellNavigation: true, editable: true, autoEdit: true, enableColumnPicker: true, };

但是可以看到当我在表中添加新行并且如果我快速单击选择元素然后它会在几秒钟内打开一个下拉列表然后它会自动关闭。

标签： angular-slickgrid

解决方案

请注意，我是 Angular-Slickgrid 的作者，我已经回复了您在此处为相同问题打开的 GitHub 问题。答案将与下图相同

发生这种情况是因为您使用的是addItem来自网格服务的，它突出显示插入的行 1.5 秒，它通过向该行添加一个 css 类 1.5 秒然后在突出显示结束后将其删除（有一个额外的 css动画），当它这样做时，它将从任何打开的编辑器中移除焦点。真正的原因是，一旦突出显示它，在 1.5 秒后，它会调用网格的重新渲染（通过invalidate），并且因为它重新渲染了整行，所以它会删除编辑器。

因此，如果您不喜欢这种行为，那么您可以通过以下选项简单地删除突出显示

this.angularGrid.gridService.addItem(newRows[0], { highlightRow: false });

推荐阅读