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如何判断输入的url是否正确
Apr 11 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
Vuex的初探与实战小结
Nov 26 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
PHP编程基本语法快速入门手册
2016/01/07 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
js事件委托和事件代理案例分享
2017/07/25 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
Python实现Linux下守护进程的编写方法
2014/08/22 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
关于box-sizing的全面理解
2016/07/28 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
索尼巴西商店:Sony巴西
2019/06/21 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
电子工程专业毕业生求职信
2014/03/14 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL