航空公司选择列名数据绑定及查找定位数据过滤筛选

src/app/pages/basic-data/airline/airline.component.html

@@ -5,6 +5,15 @@
                 <div class="line-operator-left input-container mb-3 col-xlg-8 col-mlg-8 col-xl-8 col-lg-10">
                     <select class="mr-4 form-control" [(ngModel)]="SEL_COL" name="" id="">
                         <option value="">选择列名</option>
+                        <option value="airlineCode">航空公司代码</option>
+                        <option value="airlineName">航空公司中文名</option>
+                        <option value="briefNameChn">中文简称</option>
+                        <option value="airlineNameEng">航空公司英文名</option>
+                        <option value="briefNameEng">英文简称</option>
+                        <option value="airlineCodeIata">IATA码</option>
+                        <option value="airlineCodeCaa">CAA码</option>
+                        <option value="airlineCodeIcao">ICAO码</option>
+                        <option value="parentAirlineId">上级母公司</option>
                     </select>
                     <label class="radio-inline custom-radio nowrap mr-4">
                         <input type="radio" [(ngModel)]="FLT_POS" [value]="1" name="filter-position">
@@ -63,7 +72,8 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr *ngFor="let airline of render_data;let i = index">
+                        <tr *ngFor="let airline of render_data;let i = index" (click)="selectRow(airline)"
+                            [ngClass]="{'selected':row_state===airline}">
                             <td>{{i+1}}</td>
                             <td>{{airline.airlineCode}}</td>
                             <td>{{airline.airlineName}}</td>

src/app/pages/basic-data/airline/airline.component.ts

@@ -10,43 +10,51 @@ import * as $ from 'jquery';
 })
 export class AirlineComponent implements OnInit {
 
-    constructor(
+constructor(
-        private httpCilent: HttpClientService,
+    private httpCilent: HttpClientService,
-        private basicDataService: BasicDataService
+    private basicDataService: BasicDataService
-    ) { }
+) { }
 
-    // 搜索条件
+// 搜索条件
-    SEARCH = '';    //手动输入条件
+SEARCH = '';    //手动输入条件
-    FLT_POS = 1;    //过滤还是定位
+FLT_POS = 1;    //过滤还是定位
-    SEL_COL = '';   //选择列名
+SEL_COL = '';   //选择列名
 
-    airlines:Array<any>;
+airlines:Array<any>;
-    public row_state: any = { renderFlight: {} };
+public row_state: any = { renderFlight: {} };
-    public render_data: Array<object> = [];  //显示数据，即需要显示的数据
+public render_data: Array<object> = [];  //显示数据，即需要显示的数据
-    public return_data: Array<object> = []; //下拉框显示数据
+public return_data: Array<object> = []; //下拉框显示数据
-    //下拉框
+//下拉框
-    public filterItems = {
+public filterItems = {
-        airlineName:'',
+    airlineName:'',
-        briefNameChn:'',
+    briefNameChn:'',
-    }
+}
-    ngOnInit() {
+ngOnInit() {
-        this.airlines = this.basicDataService.airline;
+    this.airlines = this.basicDataService.airline;
-        this.basicDataService.airline_subject.subscribe(
+    this.basicDataService.airline_subject.subscribe(
-            data=>{
+        data=>{
-                this.airlines = data;
+            this.airlines = data;
-                this.render_data = this.airlines;
+            this.render_data = this.airlines;
-            }
-        )
-        /**
-         * 固定表头
-         */
-        var tableCont = document.querySelector('#table-container');
-        function scrollHandle (){
-          var scrollTop = this.scrollTop;
-          this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
         }
-        tableCont.addEventListener('scroll',scrollHandle);
+    )
+    /**
+     * 固定表头
+     */
+    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() {