经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » AngularJS » 查看文章
Angular封装搜索框组件操作示例
来源：jb51　　时间：2019/4/26 8:31:05　　对本文有异议

本文实例讲述了Angular封装搜索框组件操作。分享给大家供大家参考，具体如下：

后台管理系统多是以表格和表单为主，有列表就一定会有列表的筛选功能，所以在此把列表头部的搜索功能拆分出一个公共组件，方便使用。

大致样式如下图：

这里我使用的是ng-zorro蚂蚁金服的angular组件库

index.html:

  1. <div nz-form class="ant-advanced-search-form">
  2.  <nz-row [nzGutter]="24">
  3.   <nz-col [nzSpan]="8" *ngFor="let item of columns, let i=index" [style.display]="(i>2 && !expandForm) ? 'none' : 'block'">
  4.    <nz-form-item nzFlex>
  5.     <nz-form-label style="min-width: 20%;">{{item.label}}</nz-form-label>
  6.     <nz-form-control>
  7.      <input nz-input [(ngModel)]="searchData[item.key]" placeholder="请输入" *ngIf="item.type === 'input'">
  8.      <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请选择" *ngIf="item.type === 'select'">
  9.       <nz-option *ngFor="let son of item.data; let idx = index" [nzLabel]="son.label" [nzValue]="son.value"></nz-option>
  10.      </nz-select>
  11.      <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请选择" *ngIf="item.type === 'gender'">
  12.       <nz-option nzLabel="女" nzValue=0></nz-option>
  13.       <nz-option nzLabel="男" nzValue=1></nz-option>
  14.      </nz-select>
  15.      <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请输入" *ngIf="item.type === 'operator'"
  16.       nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch($event)" (ngModelChange)="changeOption($event)">
  17.       <ng-container *ngFor="let opt of operatorOptions">
  18.        <nz-option [nzValue]="opt" [nzLabel]="opt.name + '-'+ opt.user_type"></nz-option>
  19.       </ng-container>
  20.      </nz-select>
  21.      <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请输入" *ngIf="item.type === 'merchant'"
  22.       nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch_merchant($event)">
  23.       <ng-container *ngFor="let opt of merchantOptions">
  24.        <nz-option [nzValue]="opt.id" [nzLabel]="opt.name"></nz-option>
  25.       </ng-container>
  26.      </nz-select>
  27.      <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请输入" *ngIf="item.type === 'client'"
  28.       nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch_client($event)">
  29.       <ng-container *ngFor="let opt of clientOptions">
  30.        <nz-option [nzValue]="opt.id" [nzLabel]="opt.name"></nz-option>
  31.       </ng-container>
  32.      </nz-select>
  33.      <nz-select [(ngModel)]="searchData[item.key]" nzPlaceHolder="请输入" *ngIf="item.type === 'admin'"
  34.       nzAllowClear nzShowSearch [nzServerSearch]="true" (nzOnSearch)="onSearch_admin($event)">
  35.       <ng-container *ngFor="let opt of adminOptions">
  36.        <nz-option [nzValue]="opt.id" [nzLabel]="opt.name"></nz-option>
  37.       </ng-container>
  38.      </nz-select>
  39.      <nz-date-picker *ngIf="item.type === 'date'" [(ngModel)]="searchData[item.key]"></nz-date-picker>
  40.     </nz-form-control>
  41.    </nz-form-item>
  42.   </nz-col>
  43.   <nz-col [nzSpan]="8" style="text-align: left;" [hidden]="filterLength >= 3">
  44.    <button nz-button type="submit" nzType="primary" [nzLoading]="loading" (click)="submit()">查询</button>
  45.    <button nz-button type="reset" (click)="resetData()" class="mx-sm">重置</button>
  46.   </nz-col>
  47.  </nz-row>
  48.  <nz-row [hidden]="filterLength < 3">
  49.   <nz-col [nzSpan]="24" style="text-align: right;">
  50.    <button nz-button type="submit" nzType="primary" [nzLoading]="loading" (click)="submit()">查询</button>
  51.    <button nz-button type="reset" (click)="resetData()" class="mx-sm">重置</button>
  52.    <a (click)="expandForm = !expandForm" *ngIf="filterLength > 3">
  53.     {{expandForm ? '收起' : '展开'}}
  54.     <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
  55.    </a>
  56.   </nz-col>
  57.  </nz-row>
  58. </div>
  59.  

index.ts:

  1. import { OnInit, Input, Output, Component, EventEmitter } from '@angular/core';
  2. import { _HttpClient } from '@delon/theme';
  3. @Component({
  4.  selector: 'search-filter',
  5.  templateUrl: './index.html',
  6.  styleUrls: ['./index.less']
  7. })
  8. export class SearchFilterComponent implements OnInit {
  9.  @Input() columns;
  10.  @Input() loading;
  11.  @Output() toSearch = new EventEmitter<Object>();
  12.  constructor(
  13.   private httpClient: _HttpClient,
  14.  ) { }
  15.  searchData: any = {
  16.   page: 1,
  17.   limit: 15
  18.  };
  19.  filterLength = 0;
  20.  operatorOptions = [];
  21.  merchantOptions = [];
  22.  clientOptions = [];
  23.  adminOptions = [];
  24.  ngOnInit() {
  25.   this.columns.forEach(el => {
  26.    if (el.type == 'operator') {
  27.     this.searchData['user_id'] = '';
  28.     this.searchData['el.user_type'] = '';
  29.     this.onSearch('')
  30.    }
  31.    if (el.type == 'merchant') {
  32.     this.onSearch_merchant('')
  33.    }
  34.    if (el.type == 'client') {
  35.     this.onSearch_client('')
  36.    }
  37.    if (el.type == 'admin') {
  38.     this.onSearch_admin('')
  39.    }
  40.    this.searchData[el.key] = "";
  41.    this.filterLength++;
  42.   })
  43.  }
  44.  // 清空搜索条件
  45.  resetData() {
  46.   for (const i in this.searchData) {
  47.    if (this.searchData[i]) {
  48.     this.searchData[i] = '';
  49.    }
  50.   }
  51.   this.searchData.page = 1;
  52.   this.searchData.limit = 15;
  53.   this.submit();
  54.  }
  55.  // 搜索按钮事件
  56.  submit() {
  57.   if (this.searchData.operator) {
  58.    delete this.searchData.operator;
  59.   }
  60.   if (this.searchData.start_at) {
  61.    this.searchData.start_at = this.format(this.searchData.start_at)
  62.   }
  63.   if (this.searchData.end_at) {
  64.    this.searchData.end_at = this.format(this.searchData.end_at)
  65.   }
  66.   this.toSearch.emit(this.searchData);
  67.  }
  68.  // 日志操作人搜索
  69.  onSearch(value: string) {
  70.   this.httpClient.get('/api/admin/member?name=' + value).subscribe((res: {}) => {
  71.    const resData: any = res;
  72.    this.operatorOptions = resData.message;
  73.   });
  74.  }
  75.  changeOption(value: {}) {
  76.   this.searchData.user_id = value['id'];
  77.   this.searchData.user_type = value['user_type'];
  78.  }
  79.  // 商户名称搜索
  80.  onSearch_merchant(value: string) {
  81.   this.httpClient.get('/api/admin/merchant?name=' + value).subscribe((res: {}) => {
  82.    const resData: any = res;
  83.    this.merchantOptions = resData.message.data;
  84.   });
  85.  }
  86.  // 客户名搜索
  87.  onSearch_client(value: string) {
  88.   this.httpClient.get('/api/admin/user?name=' + value).subscribe((res: {}) => {
  89.    const resData: any = res;
  90.    this.clientOptions = resData.message.data;
  91.   });
  92.  }
  93.  // 操作员名搜索
  94.  onSearch_admin(value: string) {
  95.   this.httpClient.get('/api/admin/admin?name=' + value).subscribe((res: {}) => {
  96.    const resData: any = res;
  97.    this.adminOptions = resData.message.data;
  98.   });
  99.  }
  100.  // 格式化时间
  101.  format(time) {
  102.   var date = new Date(time);
  103.   var year = date.getFullYear();
  104.   var month = date.getMonth() + 1;
  105.   var day = date.getDate();
  106.   return (year + '-' + month + '-' + day);
  107.  }
  108. }
  109.  

index.less:

  1. :host {
  2.   display: block;
  3.   width: 95%;
  4.   margin: 0 auto;
  5.   ::ng-deep {
  6.     nz-form-control {
  7.       min-width: 60%;
  8.     }
  9.     nz-select {
  10.       width: 100%;
  11.     }
  12.     .ant-calendar-picker {
  13.       width: 100%;
  14.     }
  15.   }
  16. }
  17.  

其中有个特殊的地方，是根据用户输入的关键字，先模糊搜索用户名和用户类型，再根据用户选择的用户id去进行筛选。

更多关于AngularJS相关内容感兴趣的读者可查看jb51专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

AngularJS热门文章

  • 在Angular中如何监听某个值的变化
  • Angular Excel 导入与导出的实现代码
  • bootstrap tooltips在 angularJS中的使用方法
  • angular多语言配置详解
  • Angular封装搜索框组件操作示例
  • Angular父子组件通过服务传参的示例方法
  • AngularJS 截取字符串
  • AngularJS上传文件的示例代码
  • angular4笔记系列之内置指令小结
  • 利用Angular7开发一个Radio组件的全过程

    • AngularJS推荐文章

  • 十分钟学会angular
  • angular多语言配置详解
  • Angular封装搜索框组件操作示例

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号