快捷導(dǎo)航

Angular封裝搜索框組件操作示例

更新時(shí)間：2019年04月25日 11:56:46 作者：guanguan0_0

這篇文章主要介紹了Angular封裝搜索框組件操作,結(jié)合實(shí)例形式分析了基于Angular組件庫實(shí)現(xiàn)搜索功能的封裝操作相關(guān)實(shí)現(xiàn)步驟與注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了Angular封裝搜索框組件操作。分享給大家供大家參考，具體如下：

后臺(tái)管理系統(tǒng)多是以表格和表單為主，有列表就一定會(huì)有列表的篩選功能，所以在此把列表頭部的搜索功能拆分出一個(gè)公共組件，方便使用。

大致樣式如下圖：

這里我使用的是ng-zorro螞蟻金服的angular組件庫

index.html:

<div nz-form class="ant-advanced-search-form">
 <nz-row [nzGutter]="24">
  <nz-col [nzSpan]="8" *ngFor="let item of columns, let i=index" [style.display]="(i>2 && !expandForm) ? 'none' : 'block'">
   <nz-form-item nzFlex>
    <nz-form-label style="min-width: 20%;">{{item.label}}</nz-form-label>
    <nz-form-control>
     <input nz-input [(ngModel)]="searchData[item.key]" placeholder="請輸入" *ngIf="item.type === 'input'">
     <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="請選擇" *ngIf="item.type === 'select'">
      <nz-option *ngFor="let son of item.data; let idx = index" [nzLabel]="son.label" [nzValue]="son.value"></nz-option>
     </nz-select>
     <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="請選擇" *ngIf="item.type === 'gender'">
      <nz-option nzLabel="女" nzValue=0></nz-option>
      <nz-option nzLabel="男" nzValue=1></nz-option>
     </nz-select>
     <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="請輸入" *ngIf="item.type === 'operator'"
      nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch($event)" (ngModelChange)="changeOption($event)">
      <ng-container *ngFor="let opt of operatorOptions">
       <nz-option [nzValue]="opt" [nzLabel]="opt.name + '-'+ opt.user_type"></nz-option>
      </ng-container>
     </nz-select>
     <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="請輸入" *ngIf="item.type === 'merchant'"
      nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch_merchant($event)">
      <ng-container *ngFor="let opt of merchantOptions">
       <nz-option [nzValue]="opt.id" [nzLabel]="opt.name"></nz-option>
      </ng-container>
     </nz-select>
     <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="請輸入" *ngIf="item.type === 'client'"
      nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch_client($event)">
      <ng-container *ngFor="let opt of clientOptions">
       <nz-option [nzValue]="opt.id" [nzLabel]="opt.name"></nz-option>
      </ng-container>
     </nz-select>
     <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="請輸入" *ngIf="item.type === 'admin'"
      nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch_admin($event)">
      <ng-container *ngFor="let opt of adminOptions">
       <nz-option [nzValue]="opt.id" [nzLabel]="opt.name"></nz-option>
      </ng-container>
     </nz-select>
     <nz-date-picker *ngIf="item.type === 'date'" [(ngModel)]="searchData[item.key]"></nz-date-picker>
    </nz-form-control>
   </nz-form-item>
  </nz-col>
  <nz-col [nzSpan]="8" style="text-align: left;" [hidden]="filterLength >= 3">
   <button nz-button type="submit" nzType="primary" [nzLoading]="loading" (click)="submit()">查詢</button>
   <button nz-button type="reset" (click)="resetData()" class="mx-sm">重置</button>
  </nz-col>
 </nz-row>
 <nz-row [hidden]="filterLength < 3">
  <nz-col [nzSpan]="24" style="text-align: right;">
   <button nz-button type="submit" nzType="primary" [nzLoading]="loading" (click)="submit()">查詢</button>
   <button nz-button type="reset" (click)="resetData()" class="mx-sm">重置</button>
   <a (click)="expandForm = !expandForm" *ngIf="filterLength > 3">
    {{expandForm ? '收起' : '展開'}}
    <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
   </a>
  </nz-col>
 </nz-row>
</div>

index.ts:

import { OnInit, Input, Output, Component, EventEmitter } from '@angular/core';
import { _HttpClient } from '@delon/theme';
@Component({
 selector: 'search-filter',
 templateUrl: './index.html',
 styleUrls: ['./index.less']
})
export class SearchFilterComponent implements OnInit {
 @Input() columns;
 @Input() loading;
 @Output() toSearch = new EventEmitter<Object>();
 constructor(
  private httpClient: _HttpClient,
 ) { }
 searchData: any = {
  page: 1,
  limit: 15
 };
 filterLength = 0;
 operatorOptions = [];
 merchantOptions = [];
 clientOptions = [];
 adminOptions = [];
 ngOnInit() {
  this.columns.forEach(el => {
   if (el.type == 'operator') {
    this.searchData['user_id'] = '';
    this.searchData['el.user_type'] = '';
    this.onSearch('')
   }
   if (el.type == 'merchant') {
    this.onSearch_merchant('')
   }
   if (el.type == 'client') {
    this.onSearch_client('')
   }
   if (el.type == 'admin') {
    this.onSearch_admin('')
   }
   this.searchData[el.key] = "";
   this.filterLength++;
  })
 }
 // 清空搜索條件
 resetData() {
  for (const i in this.searchData) {
   if (this.searchData[i]) {
    this.searchData[i] = '';
   }
  }
  this.searchData.page = 1;
  this.searchData.limit = 15;
  this.submit();
 }
 // 搜索按鈕事件
 submit() {
  if (this.searchData.operator) {
   delete this.searchData.operator;
  }
  if (this.searchData.start_at) {
   this.searchData.start_at = this.format(this.searchData.start_at)
  }
  if (this.searchData.end_at) {
   this.searchData.end_at = this.format(this.searchData.end_at)
  }
  this.toSearch.emit(this.searchData);
 }
 // 日志操作人搜索
 onSearch(value: string) {
  this.httpClient.get('/api/admin/member?name=' + value).subscribe((res: {}) => {
   const resData: any = res;
   this.operatorOptions = resData.message;
  });
 }
 changeOption(value: {}) {
  this.searchData.user_id = value['id'];
  this.searchData.user_type = value['user_type'];
 }
 // 商戶名稱搜索
 onSearch_merchant(value: string) {
  this.httpClient.get('/api/admin/merchant?name=' + value).subscribe((res: {}) => {
   const resData: any = res;
   this.merchantOptions = resData.message.data;
  });
 }
 // 客戶名搜索
 onSearch_client(value: string) {
  this.httpClient.get('/api/admin/user?name=' + value).subscribe((res: {}) => {
   const resData: any = res;
   this.clientOptions = resData.message.data;
  });
 }
 // 操作員名搜索
 onSearch_admin(value: string) {
  this.httpClient.get('/api/admin/admin?name=' + value).subscribe((res: {}) => {
   const resData: any = res;
   this.adminOptions = resData.message.data;
  });
 }
 // 格式化時(shí)間
 format(time) {
  var date = new Date(time);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  return (year + '-' + month + '-' + day);
 }
}

index.less:

:host {
  display: block;
  width: 95%;
  margin: 0 auto;
  ::ng-deep {
    nz-form-control {
      min-width: 60%;
    }
    nz-select {
      width: 100%;
    }
    .ant-calendar-picker {
      width: 100%;
    }
  }
}

其中有個(gè)特殊的地方，是根據(jù)用戶輸入的關(guān)鍵字，先模糊搜索用戶名和用戶類型，再根據(jù)用戶選擇的用戶id去進(jìn)行篩選。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: