2015-11-25 4 views
5

私は任意の行の任意の場所をクリックして行を選択するuiグリッドを持っています。 また、クリップボードにセルの内容をコピーしたいと思います。 次のコードを実行しましたが、enableFullRowSelectionですが、マウスのドラッグでセルの内容を選択することはできません。角のグリッドはセルテキストをコピーできません

plunkerを参照してください。さらに調査したところ、.ui-grid-disable-selectionクラスが私のグリッドに追加されています。

どのようにこれを解決する方法を提案できますか?

EDIT:私は偽enableFullRowSelectionを変更した場合、私は、コンテンツを選択することができます。

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 = { 
 
\t data : 'data', 
 
\t enableRowSelection: true, 
 
\t enableFullRowSelection: true, 
 
\t enableHighlighting : true, 
 
\t 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="[email protected]" 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>
助けてください。

答えて

8

私は最も簡単な方法は、CSSクラスをオーバーライドすることだと思います。あなたは、UIグリッドコードを確認する場合は、UI-グリッド・ディスエーブル・セレクションクラスが追加されたフラグの両方が

ui-grid-disable-selection

を設定している場合

以下のようにあなたは、グリッドの要素にクラスを追加することができます
<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; 
    } 

plunkerを確認してください。

+0

ありがとうございます。 –

関連する問題