2015-11-25 30 views
5

我有一個ui網格,我想通過單擊任何行上的任何位置來選擇行。 我也想複製一個單元格內容到剪貼板。 我做了下面的代碼,但enableFullRowSelectiontrue,我不能通過鼠標拖動選擇單元格內容。請參閱plunker。經過進一步調查,我發現.ui-grid-disable-selection類正在被添加到我的網格中。角ui網格不能複製單元格文本

那麼,任何人都可以建議如何解決這個問題?

編輯:如果我改變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-grid-disable-selection

加入 UI網 - 禁用選擇

您可以添加一個類柵格元件如下圖所示

<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

謝謝,它的工作原理。 –