import { Component, OnInit } from '@angular/core'; import { BasicDataService } from '../../basic-data-service' import { ChangeDetectorRef } from '@angular/core'; import * as $ from 'jquery'; @Component({ selector: 'app-terminal', templateUrl: './terminal.component.html', styleUrls: ['./terminal.component.scss'] }) export class TerminalComponent implements OnInit { constructor( private basicDataService: BasicDataService, private changeDetectorRef: ChangeDetectorRef ) { } public col_lists = [ { col_code: 'terminalCode', col_chn: '航站楼代码' }, { col_code: 'terminalName', col_chn: '航站楼名称' } ] // 搜索条件 SEARCH = ''; //手动输入条件 FLT_POS = 1; //过滤还是定位 SEL_COL = ''; //选择列名 terminals: Array; public row_state: any = { renderFlight: {} }; public render_data: Array = []; //显示数据,即需要显示的数据 ngOnInit() { this.terminals = this.basicDataService.terminal; this.render_data = this.basicDataService.terminal; this.basicDataService.terminal_subject.subscribe( data => { this.terminals = data; this.render_data = data; } ) /** * 固定表头 */ var tableCont = document.querySelector('#table-container'); function scrollHandle() { var scrollTop = this.scrollTop; this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)'; } tableCont.addEventListener('scroll', scrollHandle); } /** * 选中某行 * @param i */ selectRow(i) { this.row_state = i; } //输入框回车事件 inputEnter() { if (this.FLT_POS === 1) { this.inputFilter(this.terminals) } else { this.inputPosition(this.render_data) } } //输入框筛选 inputFilter(filterData) { if (this.SEARCH) { if (this.SEL_COL) { let sel_col = this.SEL_COL; this.render_data = filterData.filter(item => { if (item[sel_col]) { if (item[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) { return true; } } else { return false; } }) } else { this.render_data = filterData.filter(item => { let is_satis = false; let cols = this.col_lists; for (let i = 0; i < cols.length; i++) { if (item[cols[i].col_code]) { if (item[cols[i].col_code].toString().match(new RegExp(this.SEARCH, 'i'))) { is_satis = true; break; } else { is_satis = false; continue; } } else { is_satis = false; continue; } } return is_satis; }) } } else { this.render_data = filterData; } } positionArray: Array = []; positionArrayIndex: number = 0; //输入框定位 inputPosition(filterData) { let transArray = [] if (this.SEL_COL) { let sel_col = this.SEL_COL; filterData.forEach(element => { if (element[sel_col]) { if (element[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) { transArray.push(element) } } else { if (!this.SEARCH) { transArray.push(element) } } }); } else { filterData.forEach(element => { let cols = this.col_lists; for (let i = 0; i < cols.length; i++) { if (element[cols[i].col_code]) { if (element[cols[i].col_code].toString().match(new RegExp(this.SEARCH, 'i'))) { transArray.push(element) break; } else { continue; } } else { if (this.SEARCH) { continue; } else { transArray.push(element) break; } } } }); } if (transArray.length > 0) { if (transArray.toString() == this.positionArray.toString()) { this.positionArrayIndex++; if (this.positionArrayIndex === this.positionArray.length) { this.positionArrayIndex = 0; } this.row_state = this.positionArray[this.positionArrayIndex]; } else { this.positionArray = transArray; this.positionArrayIndex = 0; this.row_state = this.positionArray[this.positionArrayIndex]; } } else { alert('没有搜索到相关数据'); } this.changeDetectorRef.detectChanges(); let tr = $(".selected"); let objTr = tr[0]; if (objTr) { $("#table-container").animate({ scrollTop: objTr.offsetTop - 42 }, "slow"); } } }