Question

我试图通过向表行中添加选择功能来扩展“角度排序表”示例。我设法实现了单击突出显示（选择）和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代码。

如何使用Angular Mat-Sort-Table通过SHIFT实现多重选择？

0 个答案: