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

I am using ui-grid v3.1.1 and have enabled rowSelection. I notice that when I enable row selection, I can no longer select (click-hold-drag) text from the rows.

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

I noticed the same behaviour in the example in their tutorials (second grid on the page).

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

It would be great to know if there is some work around by which I can still allow the user to select text, while the rowSelection is enabled.

很高兴知道在启用rowSelection的同时,我仍然可以允许用户选择文本。

Here is a plunkr link to the example from the tutorial.

这是教程中示例的一个plunkr链接。

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

2 个解决方案

#1

A previous SO answer by @Aman Mahajan offers a fix:

@Aman Mahajan之前的回答提供了一个修复:

A ui-grid-disable-selection class is added to the grid when both enableRowSelection and enableFullRowSelectionare enabled (can check ui-grid v3.1.1 source in selection.js ~line 903). So you can override the CSS class by adding a specific class to your grid, for example ui-grid-selectable.

当enableRowSelection和enableFullRowSelection都被启用时,ui-grid-disable-selection类被添加到网格中(可以在selection.js~line 903中检查ui-grid v3.1.1源)。因此,您可以通过向网格添加特定类来覆盖CSS类,例如ui-grid-selectable。

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

And in your CSS:

在你的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;
 }

Here's the forked plunker with the added CSS class to override the default behavior.

这是分叉的plunker,添加了CSS类来覆盖默认行为。

#2

I definitely like BennettAdams answer better, but just in case anyone needs another way to do it, you can add ui-grid-edit to your html grid tag like so:

我非常希望BennettAdams能够更好地回答,但是如果有人需要另外一种方法,你可以将ui-grid-edit添加到你的html网格标签中,如下所示:

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

Note: this also requires defining ui.grid.edit in your app definition like so:

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

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

Cons:

Requires you to double-click the cell to get to the text

要求您双击单元格以获取文本

Allows users to edit the cell value (although the changes will not be saved if it's not set up)

允许用户编辑单元格值(尽管如果未设置更改,则不会保存更改)

Pros:

Double-clicking cell automatically highlights all the text

双击单元格会自动突出显示所有文本

More readable code (although it may not be obvious why the cell is editable if no changes are persisted).

更易读的代码(尽管如果没有持久的更改,单元格可编辑的原因可能并不明显)。

#1