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 相关文章推荐
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
动态加载js的方法汇总
Feb 13 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
js轮播图之旋转木马效果
Oct 13 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
PHP概述.
2006/10/09 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
PHP实现的策略模式示例
2019/03/20 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
js闭包用法实例详解
2016/12/13 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
浅谈微信小程序flex布局基础
2018/09/10 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
python实现ID3决策树算法
2017/12/20 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
给朋友的道歉信
2014/01/09 职场文书
学校元旦晚会方案
2014/02/19 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
数字化校园建设方案
2014/05/03 职场文书
电子商务求职信
2014/06/15 职场文书
党校党性分析材料
2014/12/19 职场文书