复制并从 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"

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

上述 CSS 修复不适用于 IE>10 版本。所以，我认为这将是一个更好的解决方案。

注意：这是 ag-Grid Enterprise 的一项功能。

Answer 2

@thirtydot 我不是在寻找范围选择，我在寻找用户可以 从单元格中选择部分或全部文本。

我将这个 CSS 用于一些网格，它对用户能够选择和复制单元格中的部分文本很有用：

/* enable basic browser text selection in grid cells */
div.ag-root .ag-cell-focus {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

ag-grid 附带的一些 CSS 会禁用单元格中的文本选择（使用 user-select: none;），可能是因为它与 range selection 企业功能发生冲突。不过这对你来说不是问题！