angularjs - 如何在启用行选择的 Angular ui 网格中启用文本选择

Question

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

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

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

Here是指向教程中示例的 plunkr 链接。

$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 ~line 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覆盖默认行为。