将“复制此行”上下文菜单添加到 ag Grid

Question

我想将“将此行复制到剪贴板”上下文菜单项添加到我的 agGrid（在 Angular 9 中运行）。

agGrid 为我们提供了一个“params”值，其中包含当前选定的值，以及 params.node.data，其中包含该行的“原始”整个记录。

getContextMenuItems(params) {
    return [
      {
        name: 'Copy this row',
        action: function() {
          let dataForThisRecord = params.node.data;

          //  ...what now...?
      },
      'export'    //  This adds the generic agGrid "export\export to Excel" menu items
    ];
}

问题是，我的params.node.data 很大，而我的 agGrid 实际上只显示这条记录的 5 个字段，所以我只想要这 5 个字段（与网格中的顺序相同）。

另外，这 5 个 agGrids 列中的一些列可能具有 valueGetter 函数或 cellRenderers，因此我想在调用它们之后获取值。

所以，与其导出原始数据，我可以在 params.node.data 对象中看到：

{
   forename: 'Mike',
   surname: 'Jones',
   DOB: '2020-04-30T00:00:00',
   countryID: 1001,
   phone: '055 123 4567'
}

我想在通过任何 cellRenderers 或 valueGetters 之后复制值在网格中显示：

[ 'Mike', 'Jones', '30/4/2020', 'France', '055 123 4567' ]

可以这样做吗？

我假设是这样，当我在上下文菜单中添加默认的“导出”选项时，agGrid 本身会很高兴地将我的数据导出到 Excel 文件中，其中包含格式良好的值，这些值显示在网格中。

Answer 1

没有正确的方法，也不可能，因为渲染返回html。 以下解决方法。

deph 中的剪贴板 API

export interface IClipboardService {
    registerGridCore(gridCore: GridCore): void;
    pasteFromClipboard(): void;
    copyToClipboard(includeHeader?: boolean): void;
    copySelectedRowsToClipboard(includeHeader?: boolean, columnKeys?: (string | Column)[]): void;
    copySelectedRangeToClipboard(includeHeader?: boolean): void;
    copyRangeDown(): void;
}

查看来自企业的ClipboardService。 私下ClipboardService.copyFocusedCellToClipboard 从gridOptions.processCellForClipboard 获取值。

设置gridOptions.processCellForClipboard = (params) => myLogic(params.node.data, params.column.colDef.field)。 然后选择行为params.node.setSelected(true)。 然后params.api.copySelectedRowsToClipboard(false, columnKeys)

colDef 中的所有渲染管道方法，不是在 api 中，而是在 api 中！

GridApi 中不存在格式化程序valueFormatterService。但是valueGetter 以params.api.getValue 的形式存在。

TLDR

action: function() {
   const colDef = params.column.getColDef();
   // do
   const value = colDef.valueGetter(...);
   // or do 
   const value = params.api.getValue(colDef.colId, params.node); // valueGetter
   // then
   params.api.clipboardService.copyDataToClipboard(value);
},

警告

第一种方法通过选择起作用，它很糟糕，因为用户会受到影响。

第二种方法需要播放管道。

总的来说，我发现我自己编写了处理控制台的处理程序，因此 Excel 和剪贴板中的格式经常不匹配。

Answer 2

你只需要写：

{
    name: 'Details for... ',
    disabled: true,
},
'separator',
'copy',
'copyWithHeaders',
'copyWithGroupHeaders',
'separator'

https://www.ag-grid.com/javascript-data-grid/context-menu/