Question

我使用ag-grid绑定列表中的值，是否可以复制所选单元格中的值/数据。我曾尝试使用ctrl + c复制该值但是它的工作方式还有其他方法吗？

请帮助我！

Answer 1

您可以使用以下CSS执行此操作：

.ag-font-style {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

这适用于任何浏览器，即IE，Chrome，Mozilla，也可能是Safari。

Answer 2

许多用户都在要求此功能：

https://github.com/ceolter/ag-grid/issues/87

无论如何，复制粘贴功能似乎仅在企业版中有效：

https://www.ag-grid.com/angular-grid-context-menu/index.php

Answer 3

在列定义中，设置editable = true，例如：

const columns = [{
    headerName: "Name",
    field: 'name',
    width: 150,
    editable: true
}];

双击单元格会弹出一个编辑器，其中包含预选的当前文本，可以使用Ctrl + C复制出来。

请参阅：Cell Editing Documentation

Answer 4

有一个标志，可让您选择文本，然后按CTRL + C即可。

enableCellTextSelection=true

这不是企业配置，可以随时启用单元文字选择。

Answer 5

我通过创建泛型指令解决了这个问题，该指令在单击ctrl + c时将指定css选择器中的文本复制到剪贴板上。

this answer帮了我很多。

这是我的HTML：

<div copiable selector=".ag-cell-focus">
    <div  ag-grid="gridOptions" class="ag-bootstrap"></div>
</div>

这是指令代码：

// keys: 17 - ctrl, 67 - c
angular.module('common').directive('copiable', function () {
    return function (scope, element, attrs) {
        var ctrlDown = false;
        element.bind("keydown", function (event) {
            if(event.which === 17) {
                ctrlDown = true;
            } else if (event.which == 67 && ctrlDown == true) {
              var text = angular.element(attrs.selector).text();
              console.log("selected text for ctrl+c", text);
              if (window.clipboardData && window.clipboardData.setData) {
                // IE specific code path to prevent textarea being shown while dialog is visible.
                return clipboardData.setData("Text", text); 

              } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
                var textarea = document.createElement("textarea");
                textarea.textContent = text;
                textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
                document.body.appendChild(textarea);
                textarea.select();
                try {
                    return document.execCommand("copy");  // Security exception may be thrown by some browsers.
                } catch (ex) {
                    console.warn("Copy to clipboard failed.", ex);
                    return false;
                } finally {
                    document.body.removeChild(textarea);
                   ctrlDown = false;
                }
              }     
            }
        });
    };
})

注意：我无法使keyup事件发挥作用，因此最终在finally中将ctrlDown设置为false。

Answer 6

不幸的是Vinod的CSS修复不再起作用。这样做：

.ag-theme-balham.ag-unselectable {
  -webkit-user-select: text !important;
  user-select: initial !important;
}

Answer 7

是的。他们具有访问网格内置剪贴板的API方法。我最近已将此实现到自己的网格中。

在onCellFocussed事件中，我将最新的焦点列保存到成员变量中：

onCellFocused(event: CellFocusedEvent) {
    this.lastFocusColumn = [event.column]

需要将其包装在正确类型的数组中。然后在onCopy（）处理程序中（从上下文菜单中选择按CTRL + C或复制时调用的函数）：

onCopy(){
   this.gridOptions.api.copySelectedRowsToClipboard( false, this.lastFocusColumn )

第一个参数是您是否要复制标头（在我看来，我认为是您的标头）应该设置为false。

Answer 8

希望这适用于

[enableCellTextSelection]="true"

<ag-grid-angular #agGrid [enableCellTextSelection]="true" [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [rowData]="xdrData"></ag-grid-angular>

如何复制ag-grid中存在的值

8 个答案: