复制并 select 来自 ag-grid 的文本

Question

我在我的项目中使用了 Ag-grid。走了很远之后，我才知道网格用户中的文本无法 select。是否有任何帮助我可以获得 select 并从网格中复制文本，或者我需要更改为不同的插件。我不在可以返回到不同 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

@thirtydot I am not looking range selections, i am looking user can select the few or all text from a cell.

我将此 CSS 用于某些网格，它对用户能够 select 和复制单元格中的部分文本很有用：

/* 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 禁用单元格中的文本 selection（使用 user-select: none;），大概是因为它与 range selection 企业功能冲突。不过这对你来说不是问题！

Answer 2

有一个标志允许您 select 文本，然后 CTRL+C 将起作用。

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

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

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

文档：https://www.ag-grid.com/javascript-data-grid/selection-overview/

复制并 select 来自 ag-grid 的文本

Copy and select the text from ag-grid

javascript

ag-grid

angular