【angular5项目积累总结】自定义管道 OrderBy

import { Injectable, Pipe } from '@angular/core' ;  
  
  
@Pipe({  
  name:  'orderBy'   
})  
@Injectable()  
export class OrderBy {  
    /*   
    Takes a value and makes it lowercase. 
     */    
static _orderByComparator(a:any, b:any):number{  
      
      if ((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || ! isFinite(b))){  
        //  Isn't a number so lowercase the string to properly compare   
       if (a.toLowerCase() < b.toLowerCase())  return  -1 ;  
        if (a.toLowerCase() > b.toLowerCase())  return  1 ;  
    }  
      else  {  
        //  Parse strings as numbers to compare properly   
       if (parseFloat(a) < parseFloat(b))  return  -1 ;  
        if (parseFloat(a) > parseFloat(b))  return  1 ;  
    }  
      
      return  0;  //  equal each other   
   }  
  
  transform(input:any, [config  = '+' ]): any{  
      if (!Array.isArray(input))  return   input;  
  
      if (!Array.isArray(config) || (Array.isArray(config) && config.length == 1 )){  
        var  propertyToCheck:string = !Array.isArray(config) ? config : config[0 ];  
        var  desc = propertyToCheck.substr(0, 1) == '-' ;  
              
         //  Basic array   
        if (!propertyToCheck || propertyToCheck == '-' || propertyToCheck == '+' ){  
           return  !desc ?  input.sort() : input.sort().reverse();  
       }  
         else   {  
           var  property:string = propertyToCheck.substr(0, 1) == '+' || propertyToCheck.substr(0, 1) == '-'  
           ? propertyToCheck.substr(1 )  
           : propertyToCheck;  
  
            return  input.sort( function  (a:any,b:any){  
              return  !desc ?   OrderBy._orderByComparator(a[property], b[property])  
                 :  - OrderBy._orderByComparator(a[property], b[property]);  
          });  
        }  
      }  
        else   {  
          //  Loop over property of the array in order and sort   
         return  input.sort( function  (a:any,b:any){  
            for ( var  i:number = 0; i < config.length; i++ ){  
              var  desc = config[i].substr(0, 1) == '-' ;  
              var  property = config[i].substr(0, 1) == '+' || config[i].substr(0, 1) == '-'  
              ? config[i].substr(1 )  
              : config[i];  
  
              var  comparison = !desc ?   
                 OrderBy._orderByComparator(a[property], b[property])  
                :  - OrderBy._orderByComparator(a[property], b[property]);  
                      
              //  Don't return 0 yet in case of needing to sort by next property   
             if (comparison != 0)  return   comparison;  
          }  
  
          return  0;  //  equal each other   
       });  
    }  
  }  
}   

 自定义排序 公共方法

import { Injectable } from '@angular/core' ;
import { Subject } from  'rxjs/Subject' ;
@Injectable()
export class CommonService {
    private notify  =  new  Subject<any> ();
      /*  *
     * Observable string streams
       */  
    notifyObservable$  =  this  .notify.asObservable();

    constructor() { }

    public notifyOther(data: any) {
          if   (data) {
              this  .notify.next(data);
        }
    }
    public orderBy(propertyName: string, direction: number  = 0 ): any {
        let comparer  = (pre, next) =>  {
            let _pre  =  pre[propertyName];
            let _next  =  next[propertyName];
              if  (_pre == 0 && !_next)  return  direction ? -1 : 1 ;
              if  (_next == 0 && !_pre)  return  direction ? 1 : -1 ;
              if  ((!_pre && !_next) || _pre == _next)  return  0 ;
              if  (!_pre && _next)  return  direction ? 1 : -1 ;
              if  (_pre && !_next)  return  direction ? -1 : 1 ;
               
              if  ( typeof  _pre == 'string' &&  typeof  _next == 'string' ) {
                  return  direction == 0 ? 
                    _pre  && _pre.localeCompare(_next) : _next &&  _next.localeCompare(_pre);
            }   else   {
                _pre  =  parseFloat(_pre);
                _next  =  parseFloat(_next);
                  return  direction == 0 ? _pre - _next : _next -  _pre;
            }
        }
          return   comparer;
    }
}

 ---- 使用 ----
 this .lstGroups.sort( this .comService.orderBy(colName, direction));

 

查看更多关于【angular5项目积累总结】自定义管道 OrderBy的详细内容...