溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了Angular封裝搜索框組件操作。分享給大家供大家參考，具體如下：
后臺管理系統多是以表格和表單為主，有列表就一定會有列表的篩選功能，所以在此把列表頭部的搜索功能拆分出一個公共組件，方便使用。
大致樣式如下圖：
這里我使用的是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 >{{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" [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" >
<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;
});
}
// 格式化時間
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%;
}
}
}
其中有個特殊的地方，是根據用戶輸入的關鍵字，先模糊搜索用戶名和用戶類型，再根據用戶選擇的用戶id去進行篩選。
更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
