Question

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

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

在启用rowSelection的同时，知道是否仍有一些工作可以让用户选择文本会很棒。

Here是教程中示例的插件链接。

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

Answer 1

previous SO answer by @Aman Mahajan提供了修复：

当ui-grid-disable-selection和enableRowSelection都启用时，enableFullRowSelection类会添加到网格中（可以检查ui-grid v3.1.1 source in selection.js〜第903行）。因此，您可以通过向网格添加特定类来覆盖CSS类，例如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'])

<强>缺点：

要求您双击单元格以获取文本
允许用户编辑单元格值（如果未设置更改，则不会保存更改）

<强>优点：

双击单元格会自动突出显示所有文本
更易读的代码（尽管如果没有持续更改，单元格可编辑的原因可能并不明显）。

如何在启用行选择的角度ui网格中启用文本选择

2 个答案: