Angular ui-网格无法复制单元格文本
Angular ui-grid can not copy cell text
我有一个 ui-网格,我想通过单击任何行上的任何位置来 select 行。
我还想将单元格内容复制到剪贴板。
我做了以下代码,但是 enableFullRowSelection 是 true,我不能通过鼠标拖动 select 单元格内容。
请参阅plunker。经过进一步调查,我发现 .ui-grid-disable-selection class 正在添加到我的网格中。
那么有人可以建议如何解决这个问题吗?
EDIT:如果我将 enableFullRowSelection 更改为 false,我可以 select 内容
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>
请帮忙。
我认为最简单的方法是覆盖 css class。如果您检查 ui-grid 代码然后 ui-grid-disable-selection class 如果两个标志都设置
您可以添加一个 class 到网格元素,如下所示
<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。
我有一个 ui-网格,我想通过单击任何行上的任何位置来 select 行。 我还想将单元格内容复制到剪贴板。 我做了以下代码,但是 enableFullRowSelection 是 true,我不能通过鼠标拖动 select 单元格内容。
请参阅plunker。经过进一步调查,我发现 .ui-grid-disable-selection class 正在添加到我的网格中。
那么有人可以建议如何解决这个问题吗?
EDIT:如果我将 enableFullRowSelection 更改为 false,我可以 select 内容
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>
我认为最简单的方法是覆盖 css class。如果您检查 ui-grid 代码然后 ui-grid-disable-selection class 如果两个标志都设置
您可以添加一个 class 到网格元素,如下所示
<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。