角度ui-grid无法复制单元格文本

I have an ui-grid where I want to select row by clicking any where on any row. I also want to copy a cell content to clip board. I did the following code, but while enableFullRowSelection is true, I can not select cell content by mouse draging.

我有一个ui-grid,我想通过点击任何一行的任何位置来选择行。我还想将单元格内容复制到剪贴板。我做了以下代码,但是当enableFullRowSelection为true时,我无法通过鼠标拖动来选择单元格内容。

Please see the plunker. After further investigating I found .ui-grid-disable-selection class is being added to my grid.

请看看plunker。在进一步调查后,我发现.ui-grid-disable-selection类正被添加到我的网格中。

So can any one suggest how to solve this?

所以任何人都可以建议如何解决这个问题?

EDIT: If I change enableFullRowSelection to false, I can select the content.

编辑:如果我将enableFullRowSelection更改为false,我可以选择内容。

var app = angular.module('plunker', ['ui.grid', 'ui.grid.selection']);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.data = [
    {a:'A', b:'B'},
    {a:'A1', b:'B1'},
    {a:'A2', b:'B2'},
    {a:'A3', b:'B3'},
    {a:'A4', b:'B4'}
    ];
  $scope.gridOptions = {
	data : 'data',
	enableRowSelection: true,
	enableFullRowSelection: true,
	enableHighlighting : true,
	multiSelect: false
  };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" type="text/css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.7/angular.js" data-semver="1.4.7"></script>
    <script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    
    <div style="height:200px" 
    data-ui-grid="gridOptions"
    data-ui-grid-selection></div>
    
  </body>

</html>

Please help.

1 个解决方案

#1

I think the easiest way is to just override the css class. If you check the ui-grid code then ui-grid-disable-selection class is added if both the flags are set

我认为最简单的方法就是覆盖css类。如果检查ui-grid代码,则如果两个标志都已设置,则添加ui-grid-disable-selection类

You can add a class to the grid element as shown below

您可以向grid元素添加一个类,如下所示

    <div style="height:200px"
    class="ui-grid-selectable"
    data-ui-grid="gridOptions"
    data-ui-grid-selection></div>

    .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;
     }

Check the updated plunker.

检查更新的plunker。

#1