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+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
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 has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python中用Spark模块的使用教程
2015/04/13 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
历史专业大学生职业生涯规划书
2014/03/13 职场文书
实习单位评语
2014/04/26 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
副总经理岗位职责
2015/02/02 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android