如何在启用行选择的情况下在 angular ui 网格中启用文本选择

Question

我正在使用 ui-grid v3.1.1 并启用了 rowSelection。我注意到当我启用行 selection 时，我无法再从行中 select（单击-按住-拖动）文本。

我在他们的教程（页面上的第二个网格）的 example 中注意到了相同的行为。

很高兴知道是否有一些解决方法可以让用户在启用 rowSelection 的情况下 select 文本。

Here 是教程中示例的一个 plunkr link。

$scope.gridOptions = { 
     enableRowSelection: true, 
     enableRowHeaderSelection: false 
};

Answer 1

一个提供了一个修复：

当 enableRowSelection 和 enableFullRowSelection 都启用时，ui-grid-disable-selection class 被添加到网格中（可以检查 ui-grid v3.1.1 source in selection.js ~第 903 行）。因此，您可以通过向网格添加特定的 class 来覆盖 CSS class，例如 ui-grid-selectable.

<div ui-grid="gridOptions" ui-grid-selection class="grid ui-grid-selectable"></div>

在你的 CSS 中：

.ui-grid-selectable .ui-grid-disable-selection {
     -webkit-touch-callout: default;
     -webkit-user-select: text;
     -khtml-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
     user-select: text;
     cursor:auto;
 }

此处 the forked plunker with the added CSS class 用于覆盖默认行为。

Answer 2

我绝对喜欢 BennettAdams 更好的回答，但以防万一有人需要其他方法，您可以将 ui-grid-edit 添加到 html 网格标签中，如下所示：

<div ui-grid="gridOptions" ui-grid-selection ui-grid-edit></div>

注意：这还需要在您的应用定义中定义 ui.grid.edit，如下所示：

var app = angular.module('myGridApp', ['ui.grid', 'ui.grid.edit'])

缺点：

需要双击单元格才能找到文本
允许用户编辑单元格值（但如果未设置则不会保存更改）

优点：

双击单元格自动突出显示所有文本
更具可读性的代码（尽管如果不保留任何更改，为什么单元格可编辑可能并不明显）。

如何在启用行选择的情况下在 angular ui 网格中启用文本选择

How to enable text selection in angular ui grid with row selection enabled

angularjs

angular-ui-grid