javascript - 复制并从 ag-grid 中选择文本

Question

我在我的项目中使用 Ag-grid。走了很远之后，我才知道网格用户内的文本无法选择。有什么帮助我可以从网格中选择和复制文本，或者我需要更改为不同的插件。
我不在可以返回不同 UI 插件的地方，或者我可以购买 Ag-grid。需要为此找出一些代码破解。
我尝试了以下hack但不起作用。

import {Directive, EventEmitter, Output} from '@angular/core';
import {AgGridNg2} from 'ag-grid-angular';
import {GridApi} from 'ag-grid';

@Directive({
    selector: '[gridRangeRowSelection]',
})

export class AgGridSelectionDirective {

    @Output('gridRangeRowSelection') onChangeEvent = new EventEmitter();

    constructor(grid: AgGridNg2) {
        grid.rangeSelectionChanged.subscribe(event => {
            const api: GridApi = event.api;
            // deselect previous rows
            this.clearPreviousSelections(api);

            const selectedRows = this.getSelectedRows(api);

            this.onChangeEvent.emit({rows: selectedRows});
        });
    }

    public getSelectedRows(api: GridApi) {
        // get all range selections (ctrl+click/drag for multiple selections)
        const rangeSelections = api.getRangeSelections();
        const selectedRows = rangeSelections ? rangeSelections
            .map(rangeSelection => {
                let start = rangeSelection.start.rowIndex;
                let end = rangeSelection.end.rowIndex;
                if (start > end) {
                    [start, end] = [end, start];
                }

                // Equivalent of _.range(startRowIndex, endRowIndex).map(api.getDisplayedRowAtIndex)
                const selectedRowsInRange = [];
                for (let index = start; index <= end; index++) {
                    const selectedRow = api.getDisplayedRowAtIndex(index);
                    if (selectedRow) {
                        selectedRowsInRange.push(selectedRow);
                    }
                }
                return selectedRowsInRange;
            }).reduce((a, b) => a.concat(b), []) : [];

        // Unique selectedRows - as we can have multiple range selections, they may overlap rows.
        const selectedRowSet = Array.from(new Set(selectedRows));
        const selectedRowData = selectedRowSet.map(row => {
            // note we cant use row.setSelected(true), as this will override copy to clipboard
            // for cells to the whole row.
            row.selected = true;
            return row.data;
        });

        // update all newly selected and previously unselected rows
        api.updateRowData({update: selectedRowData});
        return selectedRowData;
    }

    private clearPreviousSelections(api: GridApi) {
        // note this is side-effecting selection so we only do 1 pass.
        const previousSelected = api['rowModel'].rowsToDisplay
            .filter(row => row.selected)
            .map(row => {
                row.selected = false;
                return row.data;
            });
        api.updateRowData({update: previousSelected});
        return previousSelected;
    }
}

https://gist.github.com/nite/dea82d184411a51fc6bc6adc7edaa422

提前致谢。

Answer 1

有一个标志可以让您选择文本，然后 CTRL+C 将起作用。

[enableCellTextSelection]="true"
[ensureDomOrder]="true"

This is not an enterprise config and can be at any time to enable celltext selection.

上面的 CSS 修复不适用于 IE>10 版本。所以，我认为这将是一个更好的解决方案。
文档: https://www.ag-grid.com/javascript-data-grid/selection-overview/