【问题标题】:Angular ui-grid can not copy cell textAngular ui-grid 无法复制单元格文本
【发布时间】:2016-02-28 00:16:42
【问题描述】:

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

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

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

EDIT:如果我将 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>
请帮忙。

【问题讨论】:

    标签: angularjs css angular-ui-grid


    【解决方案1】:

    我认为最简单的方法是重写 css 类。如果您检查 ui-grid 代码,则如果设置了两个标志,则添加 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

    【讨论】:

    • 大家好,如果我们想在不拖动鼠标并使用 Ctrl+C 的情况下复制整个选定的行怎么办?有什么办法或技巧吗?我有类似的要求如下:stackoverflow.com/questions/57520588/…
    猜你喜欢
    • 2017-07-01
    • 2016-09-16
    • 2019-03-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多