Как реализовать множественное выделение с помощью SHIFT с помощью Angular Mat-Sort-Table? - PullRequest
Новая
       37

Как реализовать множественное выделение с помощью SHIFT с помощью Angular Mat-Sort-Table?

0 голосов
/ 24 июня 2019

Я попытался расширить пример таблицы угловой сортировки, добавив функцию выбора в строки таблицы.Мне удалось реализовать выделение клика (выделение) и выделение Ctrl + Click.К сожалению, я не могу найти способ реализовать выбор SHIFT + Click (несколько) при сортировке таблицы. 

<table id='mainTable' mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8" >

  <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
      <td mat-cell *matCellDef="let element" class="select"> {{element.position}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
      <td mat-cell *matCellDef="let element" class="select"> {{element.name}} </td>
    </ng-container>


    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns; let i=index" (click)="toggleSelected(row, $event, i)" [ngClass]="row.isSelected ? 'selected-row' : 'not-selected-row'" ></tr>
  </table>

В коде HTML я фиксирую событие click и вызываю функцию toggleSelected (), которая проверяети устанавливает переменную isChecked в значение true, если щелкнуть строку таблицы. 


import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  isSelected: boolean;
}

const ELEMENT_DATA: PeriodicElement[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', isSelected: false },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', isSelected: false },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', isSelected: false },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be', isSelected: false },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', isSelected: false },
  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', isSelected: false },
  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', isSelected: false },
  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', isSelected: false },
  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', isSelected: false },
  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', isSelected: false },
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  displayedColumns: string[] = ['position', 'name'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  @ViewChild(MatSort, { static: true }) sort: MatSort;

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }

  //** THE MULTI SELECT CODE HERE */

  previousSelected: any;

  toggleSelected(obj, event, alldata) {
    console.log(obj);
    console.log(event);
    console.log(alldata);
    if (event.shiftKey) {
      console.log("SHIFT");

      //** here */

    } else if (event.ctrlKey) {
      console.log("CONTROL");
      obj.isSelected = true;
      this.previousSelected = obj;
    } else {
      ELEMENT_DATA.forEach(element => {
        element.isSelected = false;
        obj.isSelected = true;
        this.previousSelected = obj;
      });
    }
  }
}

В файле сценария у меня есть отсортированный массив.Когда я щелкаю строку, она выделяется (выбирается).Когда я нажимаю кнопку Ctrl, пользователь может выбрать несколько строк.Переменная isSelected в массиве изменяется.Когда пользователь щелкает снова, массив сбрасывается и щелкается отдельный элемент.В комментариях я хочу реализовать событие Shift + click, но я не могу заставить его работать.Мне нужна помощь (главным образом, когда я сортирую массив) 

table {
  width: 100%;
}

th.mat-sort-header-sorted {
  color: black;
}

tr.mat-row:hover{
  cursor: pointer;
  background-color: gray;
  color: white;
  user-select: none;
}

.selected-row {
  background-color: aqua;
}

.not-selected-row {
  background-color: white;
}

CSS-код, который выделяет строки таблицы при нажатии и изменяет курсор мыши.

...