Angular封装搜索框组件操作示例


Posted in Javascript onApril 25, 2019

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

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

大致样式如下图:

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 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;
  });
 }
 // 格式化时间
 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程序设计有所帮助。

Javascript 相关文章推荐
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 #Javascript
详解javascript中的Error对象
Apr 25 #Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 #Javascript
vue2.0自定义指令示例代码详解
Apr 25 #Javascript
Vue开发之封装分页组件与使用示例
Apr 25 #Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 #Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 #Javascript
You might like
拼音码表的生成
2006/10/09 PHP
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
JavaScript实现的九种排序算法
2019/03/04 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
浅谈python装饰器探究与参数的领取
2017/12/01 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
python多进程并行代码实例
2019/09/30 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
Python如何实现线程间通信
2020/07/30 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
辞职报告(范文三篇)
2019/08/27 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Vue如何清空对象
2022/03/03 Vue.js