在放弃让角度/材料数据表工作后,我最近开始使用 Teradata 共价数据表……我正在尝试双击数据表的特定行,但不知道从哪里开始。如果表大多是在打字稿中定义的,我如何访问行数据然后向其添加(dblclick)输出?
my code:
my html:
<td-data-table #dataTable [data]="filteredEmployees" [columns]="columns" [sortable]="true" [sortBy]="sortBy" [sortOrder]="sortOrder" (sortChange)="sort($event)"></td-data-table>
my typescript:
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
import { IPageChangeEvent } from '@covalent/core';
import { RestService } from '../../services/rest.service';
import { IEmployee } from '../../interfaces/employee.interface';
import { StringToDatePipe } from '../../pipes/string-to-date.pipe';
@Component({
selector: 'app-cashier-maintenance',
templateUrl: './cashier-maintenance.component.html',
styleUrls: ['./cashier-maintenance.component.css']
})
export class CashierMaintenanceComponent implements OnInit {
@ViewChild('filterTbl') filterTbl: ElementRef;
employees: IEmployee[];
filteredEmployees: IEmployee[];
filteredTotal: number = 100;
columns: ITdDataTableColumn[] = [
{ name: 'EMP_ID', label: 'ID', sortable: true, width: 100 },
{ name: 'EMP_NM', label: 'Name', sortable: true, width: 200 },
{ name: 'EMP_TYP', label: 'Type', sortable: true, width: 200 },
{ name: 'TEL', label: 'Telephone', sortable: true, width: 200 },
{ name: 'ADDR', label: 'Address', sortable: true, width: 200 },
{ name: 'DT_STRT', label: 'Start Date', sortable: false, width: 200 }
];
searchTerm: string = '';
sortBy: string = 'EMP_NM';
fromRow: number = 1;
currentPage: number = 1;
pageSize: number = 10;
sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending;
constructor(private _dataTableService: TdDataTableService, private restService: RestService) { }
sort(sortEvent: ITdDataTableSortChangeEvent): void {
this.sortBy = sortEvent.name;
console.log(sortEvent.name);
this.filter();
}
search(searchTerm: string): void {
this.searchTerm = searchTerm;
this.filter();
}
page(pagingEvent: IPageChangeEvent): void {
this.fromRow = pagingEvent.fromRow;
this.currentPage = pagingEvent.page;
this.pageSize = pagingEvent.pageSize;
this.filter();
}
filter(): void {
let newData: IEmployee[] = this.employees;
let excludedColumns: string[] = this.columns
.filter((column: ITdDataTableColumn) => {
return ((column.filter === undefined && column.hidden === true) ||
(column.filter !== undefined && column.filter === false));
}).map((column: ITdDataTableColumn) => {
return column.name;
});
newData = this._dataTableService.filterData(newData, this.searchTerm, true, excludedColumns);
this.filteredTotal = newData.length;
newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
this.filteredEmployees = newData;
}
getEmployees() {
this.restService.getEmployees()
.subscribe(
(res) => {
console.log(res);
this.employees = res;
this.employees.forEach((emp: IEmployee) => {
emp.DT_STRT = new StringToDatePipe().transform(emp.DT_STRT);
});
this.filter();
}, (err) => {
console.log(err);
});
}
ngOnInit() {
Observable.fromEvent(this.filterTbl.nativeElement, 'keyup')
.debounceTime(150)
.distinctUntilChanged()
.subscribe(() => {
this.searchTerm = this.filterTbl.nativeElement.value;
this.filter();
});
this.getEmployees();
}
}