Internet Explorer 中的 ag-grid 中的移动行选择选择附加文本答案

【问题标题】：Shift row selection in ag-grid in Internet Explorer selects additional textInternet Explorer 中的 ag-grid 中的移动行选择选择附加文本
【发布时间】：2016-11-08 07:41:36
【问题描述】：

我尝试了以下 ag-grid 实现的示例： Example - Multiple Row Selection 。特别是示例 - 多行选择。当我在 Chrome-Mozilla-Opera 中选择带有 shift 的行时，一切都很好，如图 1 所示。

很遗憾，我还得支持IE浏览器。当我在 IE 中做同样的操作时，还选择了一些额外的文本：上面的标题等等。有没有办法解决这个问题？

附言为这个例子准备一个 plunkr 更好还是来自 ag-grid 网站的例子就足够了？

【问题讨论】：

标签： javascript html css internet-explorer ag-grid

【解决方案1】：

为你的页面关闭用户选择，把这个 css 放到 body 上：身体 { 用户选择：无； }

网格为网格执行此操作，但不会尝试为您的应用程序的其余部分执行此操作（它不应该）。问题是 IE 如何理解 shift-click，所以我认为这不是网格问题，最好是解决它。当单页网络应用程序是详细的应用程序时，关闭用户选择是非常标准的（如果您使用的是 ag-Grid，我猜您是这样）。

【讨论】：

它有效。我只需添加 body { -ms-user-select: none } 即可将此规则应用于 Internet Explorer。

【解决方案2】：

就个人而言，对于选择行（不是单元格！），我更喜欢在行的开头使用复选框。它可能会解决您的 IE 问题。

在列定义上使用属性checkboxSelection，例如：

{headerName: "Athlete", field: "athlete",  checkboxSelection: true},

如果要强制通过复选框选择行，可以将 gridOptions 中的属性 suppressRowClickSelection 设置为 true。

【讨论】：

谢谢。是的，该复选框确实解决了问题，但不幸的是，我无法在我的项目中使用它。我找到了一个临时解决方案并将其发布在下面。

【解决方案3】：

目前，解决方案是使用：

$window.getSelection().removeAllRanges();

在

onRowSelected

听众。因此，每次更改行选择时，都会删除 IE 中其他元素的选择。不是一个好的解决方案，但总比没有好。 Mozilla MDN

【讨论】：

这对你来说是瞬间发生的吗？当我尝试这个解决方案时，我仍然在屏幕上看到其他地方的选择在被删除之前闪烁，这似乎有点不和谐。
@dsh 不幸的是，不是即时的。错误选择的区域会出现一小段时间（100-300 毫秒）然后消失。目前，我还没有找到任何其他解决方案：要么使用上面 Alexander Zbinden 提出的复选框，要么使用这个“hack”。