角垫表和平移单击选择 [英] Angular Mat table and shift click selection

问题描述

我正在尝试使用角度和打字稿在已排序的MatDataTable上实现Shift Click功能.

I am attempting to implement shift click functionality on a sorted MatDataTable using angular and typescript.

基本的缺点是，每当在表上注册一个单击事件时，都会存储所选的行.

The basic run down is that whenever a click event is registered on the table, the row that is selected is stored.

如果检测到Shift Click，则组件将尝试在最后选择的行和当前选定的行之间进行选择(就像在Windows中使用Shift Click选择一样).

If a shift click is detected, the component will attempt to select between the last selected row, and the currently selected row (Just like shift click selection works in Windows).

我拥有的事件处理代码如下:

The event handling code I have is as follows:

clickHandler(event, row, index) {
    console.log('index clicked: ' + index);
    if (event.ctrlKey) {
        this.selectRows(row, index); // This records this.lastSelected
    } else if (event.shiftKey) {
        this.selectRowsFill(row, index); 
    } else {
        this.selectElement(row, index); // As does this call.
    }
}

// This function computes a start and end point for autoselection of 
// rows between this.lastSelected, and the currently clicked row
selectRowsFill(row, index) {
    const indexA = this.lastSelected;
    const indexB = index;
    if (indexA > indexB) {
        // Descending order
        this.selectRowsBetween(indexB, indexA);
    } else {
        // Ascending order
        this.selectRowsBetween(indexA, indexB);
    }
}

// And this performs the actual selection.
private selectRowsBetween(start, end) {
    let currentIndex = 0;
    this.dataSource.data.forEach(row => {
        if (currentIndex >= start && currentIndex <= end) {
            this.selection.select(row);
        }
        currentIndex++;
    });
}

和HTML:

<mat-row *matRowDef="let row; let i = index; columns: cols;" (click)="clickHandler($event, row, i)" [ngClass]="{'inDatabase' : isAdded(row), 'highlight': isSelectedAndAdded(row) || isSelected(row) }">

只要表未排序，此代码就可以正常工作.一旦对MatTableDataSource应用排序算法，它就会更改数据顺序，从而导致选择出现故障.看起来选择是基于MatTableDataSource中数据的原始(未排序)顺序，这很有意义.

This code works fine, so long as the table is not sorted. As soon as I apply a sorting algorithm to the MatTableDataSource, it changes the order of the data, causing the selection to malfunction. It looks like the selection is based on the original (unsorted)order of the data in the MatTableDataSource, which makes sense.

那么我如何获得Shift点击选择以处理排序后的数据，而不是未排序后的数据?

So how do I get the shift click selection to work on the sorted data, rather than the unsorted data?

推荐答案

事实证明，我只需要连接到数据源，并存储从表中呈现的行的元素数组:

As it turned out, I just had to connect to the datasource, and store an array of elements that were the rendered rows from the table:

ngOnChanges(changes: SimpleChanges) {
    this.dataSource.sort = this.sort;
    this.dataSource.connect().subscribe(d => this.renderedData = d);
}

然后我可以遍历该集合:

Then I could iterate through that collection instead:

// And this performs the actual selection.
private selectRowsBetween(start, end) {
    let currentIndex = 0;
    this.renderedData.forEach(row => {
        if (currentIndex >= start && currentIndex <= end) {
            this.selection.select(row);
        }
        currentIndex++;
    });
}

这篇关于角垫表和平移单击选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！