航站楼选择列名数据绑定及查找定位数据过滤筛选

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

@@ -5,6 +5,8 @@
               <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="terminalCode">航站楼代码</option>
+                      <option value="terminalName">航站楼名称</option>
                   </select>
                   <label class="radio-inline custom-radio nowrap mr-4">
                         <input type="radio" [(ngModel)]="FLT_POS" [value]="1" name="filter-position">
@@ -19,7 +21,7 @@
               <div class="line-operator-right mb-3 col-xlg-4 col-mlg-4 col-xl-4 col-lg-1">
                   <!-- <button type="button" class="btn btn-info mr-3">航站楼编辑</button>
                   <button type="button" class="btn btn-info mr-3">打印</button> -->
-                  <button type="button" class="btn btn-info mr-3" (click)="clearFiter()">刷新</button>
+                  <button type="button" class="btn btn-info mr-3">刷新</button>
               </div>
           </div>
       </div>
@@ -36,7 +38,8 @@
                       </tr>
                   </thead>
                   <tbody>
-                      <tr *ngFor="let terminal of terminals;let i = index">
+                      <tr *ngFor="let terminal of render_data;let i = index" (click)="selectRow(terminal)"
+                          [ngClass]="{'selected':row_state===terminal}">
                           <td>{{i+1}}</td>
                           <td>{{terminal.terminalCode}}</td>
                           <td>{{terminal.terminalName}}</td>

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

@@ -20,9 +20,15 @@ SEARCH = '';    //手动输入条件
 FLT_POS = 1;    //过滤还是定位
 SEL_COL = '';   //选择列名
 
+//下拉框
+public filterItems = {
+    
+}
+
 terminals : Array<any>;
 public row_state: any = { renderFlight: {} };
 public render_data: Array<object> = [];  //显示数据，即需要显示的数据
+public return_data: Array<object> = []; //下拉框显示数据
 ngOnInit() {
     this.terminals = this.basicDataService.terminal;
     this.basicDataService.terminal_subject.subscribe(
@@ -42,160 +48,95 @@ ngOnInit() {
     tableCont.addEventListener('scroll',scrollHandle);
 }
 
-//刷新
+/**
-clearFiter(){
+ * 选中某行
-    $("#inputerInfo").val(""); //清空过滤或查找定位文本框
+ * @param i 
-    this.ngOnInit();
+ */
+selectRow(i) {
+    this.row_state = i;
 }
+
 //输入框回车事件
 inputEnter() {
     if (this.FLT_POS === 1) {
-        this.selectChange()
+        this.inputFilter(this.terminals)
     } else {
-        this.selectChange()
+        this.inputFilter(this.terminals)
-        this.inputPosition(this.render_data)
+        this.inputPosition(this.terminals)
     }
 }
 
 //下拉框选择筛选
 selectChange() {
-let filter_data = [];
+    this.return_data = this.terminals.filter(item=>{
-let filterterminals = this.render_data;
+            let is_satis = true;
-this.render_data.forEach(item => {
+            for (const key in this.filterItems) {
-    filter_data.push(Object.assign({}, item));
+                if (this.filterItems.hasOwnProperty(key) && this.filterItems[key]) {
-})
+                    if (item[key] === this.filterItems[key]) {
-if (this.FLT_POS === 1) {
+                        is_satis = true;
-    this.inputFilter(filter_data);
+                        continue;
-} else {
+                    } else {
-    this.terminals = filter_data;
+                        is_satis = false;
-    this.row_state = this.terminals.length > 0 ? this.terminals[0] : { renderFlight: {} };
+                        break;
-}
+                    }
-//下拉框筛选
-filter_data = filter_data.filter(item => {
-    if (item) {
-        let is_satis = true;
-        for (const key in filterterminals) {
-            if (filterterminals.hasOwnProperty(key) && filterterminals[key]) {
-                if (item[key] === filterterminals[key]) {
-                    is_satis = true;
-                    continue;
-                } else {
-                    is_satis = false;
-                    break;
                 }
-
             }
-        }
+            return is_satis;
-        return is_satis;
+    })
-    } else if (item) {
+    this.render_data = this.return_data;
-        let is_satis = true;
-        for (const key in filterterminals) {
-            if (filterterminals.hasOwnProperty(key) && filterterminals[key]) {
-                if (item[key] === filterterminals[key]) {
-                    is_satis = true;
-                    continue;
-                } else {
-                    is_satis = false;
-                    break;
-                }
-
-            }
-        }
-        return is_satis;
-    } else {
-        let pre_satis = true;
-        let rea_satis = true;
-        for (const key in filterterminals) {
-            if (filterterminals.hasOwnProperty(key) && filterterminals[key]) {
-                if (item[key] === filterterminals[key]) {
-                    pre_satis = true;
-                    continue;
-                } else {
-                    pre_satis = false;
-                    break;
-                }
-
-            }
-        }
-        for (const key in filterterminals) {
-            if (filterterminals.hasOwnProperty(key) && filterterminals[key]) {
-                if (item[key] === filterterminals[key]) {
-                    rea_satis = true;
-                    continue;
-                } else {
-                    rea_satis = false;
-                    break;
-                }
-
-            }
-        }
-
-        if (pre_satis && !rea_satis) {
-            item = item;
-            return pre_satis;
-        } else if (!pre_satis && rea_satis) {
-            item = item;
-            return rea_satis;
-        } else if (pre_satis && rea_satis) {
-            return pre_satis && rea_satis;
-        } else {
-            return false;
-        }
-    }
-})
 }
 
 //输入框筛选
 inputFilter(filterData) {
-if (this.SEARCH) {
+    if (this.SEARCH) {
-    if (this.SEL_COL) {
+        if (this.SEL_COL) {
-        let sel_col = this.SEL_COL;
+            let sel_col = this.SEL_COL;
-        filterData = filterData.filter(item => {
+            filterData = filterData.filter(item => {
-            if (item[sel_col]) {
+                if (item[sel_col]) {
-                if (item[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                    if (item[sel_col].toString().match(new RegExp(this.SEARCH, 'i'))) {
-                    return true;
+                        return true;
-                }
-            } else {
-                if (this.SEARCH) {
-                    return false;
-                } else {
-                    return true;
-                }
-            }
-        })
-
-    } else {
-        filterData = filterData.filter(item => {
-            let is_satis = false;
-            for (const key in item) {
-                if (item.hasOwnProperty(key)) {
-                    if (item[key]) {
-                        if (item[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
-                            is_satis = true;
-                            break;
-                        } else {
-                            is_satis = false;
-                            continue;
-                        }
-                    } else {
-                        if (this.SEARCH) {
-                            is_satis = false;
-                            continue;
-                        } else {
-                            is_satis = true;
-                            break;
-                        }
                     }
                 } else {
-                    continue;
+                    if (this.SEARCH) {
+                        return false;
+                    } else {
+                        return true;
+                    }
                 }
-            }
+            })
-            return is_satis;
+
-        })
+        } else {
+            filterData = filterData.filter(item => {
+                let is_satis = false;
+                for (const key in item) {
+                    if (item.hasOwnProperty(key)) {
+                        if (item[key]) {
+                            if (item[key].toString().match(new RegExp(this.SEARCH, 'i'))) {
+                                is_satis = true;
+                                break;
+                            } else {
+                                is_satis = false;
+                                continue;
+                            }
+                        } else {
+                            if (this.SEARCH) {
+                                is_satis = false;
+                                continue;
+                            } else {
+                                is_satis = true;
+                                break;
+                            }
+                        }
+                    } else {
+                        continue;
+                    }
+                }
+                return is_satis;
+            })
+        }
     }
-}
+    this.render_data = filterData;
-    this.terminals = filterData;
+    this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
-    this.row_state = this.terminals.length > 0 ? this.terminals[0] : { renderFlight: {} };
 }
 
 positionArray: Array<any> = [];
@@ -258,5 +199,5 @@ inputPosition(filterData) {
     } else {
         alert('没有搜索到相关数据');
     }
-    }   
+    }
 }