`
wx1569632409
  • 浏览: 99190 次
文章分类
社区版块
存档分类
最新评论

angular2 table pipe ---orderby

 
阅读更多
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
    name: 'orderBy'
})

export class OrderByPipe implements PipeTransform {

    transform(input:any, [config = "+"]): any {
        // if (!Array.isArray(value)) return value; //value 不是array,因此不能sort
        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) == '-'; //得到一个boolean值
            if (!propertyToCheck || propertyToCheck == '-' || propertyToCheck == '+') {
                //是个简单数组,可以根据数组对象进行排序,sort  reverse 都是js原生代码
                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 ? OrderByPipe._orderByComparator(a[property],b[property])
                                    : -OrderByPipe._orderByComparator(a[property],b[property]);
                });
            }
        }
        else {
            //是个复杂数组,对多个属性进行排序
            return input.sort(function (a:any, b:any) {
                for (var i = 0; i < config.length; i++) {
                    var desc = config[i].substr(0,1) == "-";
                    var property:string = config[i].substr(0,1) == "+" || config[i].substr(0,1) == "-"
                                            ? config[i].substr(1)
                                            : config[i];
                    var comparison = !desc ? OrderByPipe._orderByComparator(a[property],b[property])
                                        : -OrderByPipe._orderByComparator(a[property],b[property]);
                    if (comparison != 0) return comparison;
                }
                return 0;
            });
        }
    }

    static _orderByComparator(a:any, b:any):number {
        //isFinite() 函数用于检查其参数是否是无穷大
        if ((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || !isFinite(b))) {
            //判断条件:如果a是数字,则parseFloat(a)会报错,判断条件会直接跳到else
            //如果a是string,且是数字开头,比如1212a,这样的可以转换为数字1212,a会被忽略,如果以字母开头则会报错NaN,比如a1212
            if (a.toLowerCase() > b.toLowerCase()) return 1; //说明a 的首字母比b的首字母要大,字母相比,比的是26个字母的顺序,顺序越往后表示越大
            if (a.toLowerCase() < b.toLowerCase()) return -1; //要注意,大写的A比小写的z要大,所以要转换成小写字母
        }
        else {
            if (parseFloat(a) > parseFloat(b)) return 1;
            if (parseFloat(a) < parseFloat(b)) return -1;
        }
        return 0; //等于0则相等
    }

}

转载于:https://my.oschina.net/u/2499632/blog/776336

分享到:
评论

相关推荐

    Angular-ej2-angular-ui-components.zip

    Angular-ej2-angular-ui-components.zip,SyncFusion Angular UI组件库为构建现代Web应用程序提供了50多个跨浏览器、响应灵敏且轻量级的Angular UI控件。SyncFusion Angular UI组件库(Essential JS 2),Angularjs于...

    Angular-tabler-angular.zip

    Angular-tabler-angular.zip,由@arunabhdas tabler为angular维护-组件、演示和文档tabler angular,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计...

    Angular-Angular2-express-mongoose-gulp-node-typescript.zip

    Angular-Angular2-express-mongoose-gulp-node-typescript.zip,angularjs 2(更新至4.2.0)mean stack应用程序,使用angular2、gulp、express、node、mongodb(mongoose)和存储库模式业务层[angular2更新至4.2.0],...

    angular2-baidu-map, Angular2地图的组件.zip

    angular2-baidu-map, Angular2地图的组件 angular2-baidu-map 用于Angular5的百度地图模块在这里阅读完整文档:文档这里读取代码示例:示例请注意,它是完全重写版本,因此不考虑向后兼容性如果你使用的是以前版本的...

    angular2-tour-of-heroes-master

    https://angular.cn/docs/ts/latest/tutorial/ angular2官方文档的例子。 配合网站使用。

    angular2-datatable, 带有排序和分页的Angular2简单表组件.zip

    angular2-datatable, 带有排序和分页的Angular2简单表组件 table 组件,具有对Angular2进行排序和分页的功能 演示在plunker中检查实时演示安装npm i -S angular2-datatable用法示例AppModule.ts

    Angular-Angular6-json-schema-form.zip

    Angular-Angular6-json-schema-form.zip,angular2-json-schema-formangular6-json-schema-form的角v6 。,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的...

    Angular2权威教程--PDF

    Angular2权威教程--PDF 清晰版的ngBook --&gt; Angular2权威教程--PDF

    Angular-angular-electron-dream-starter.zip

    Angular-angular-electron-dream-starter.zip,Angular Electron初学者工具包,包括Webpack、Angular 4(路由器、HTTP、表单、服务、NGRX、测试、E2E、覆盖范围)、Karma、Spectron、Jasmine、伊斯坦布尔,以及带有...

    Angular-angular2-image-gallery.zip

    Angular-angular2-image-gallery.zip,使用Angular 8 、node.js和GraphicsMagAngular 2图像库构建的图像库,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的...

    ng-book2-angular-6-r68

    The in-depth, complete, and up-to-date book on Angular 6. Become an Angular 6 expert today.

    Angular-angular-ngrx-nx-realworld-example-app.zip

    Angular-angular-ngrx-nx-realworld-example-app.zip,示例性真实世界应用程序,由angular 8、ngrx 8、nrwl/nx 8angular、ngrx/平台、nrwl/nx代码库构建,包含遵循真实世界规范和api的真实世界示例(crud、auth、高级...

    Angular-angular-mat-table-crud.zip

    Angular-angular-mat-table-crud.zip,角材料表的crud操作角材料表的crud,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web...

    Angular-ng2-pdf-viewer.zip

    Angular-ng2-pdf-viewer.zip,用于Angular 5 Angular 5 PDF查看器的PDF查看器组件,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发...

    ng-book2-book-angular-6-r70

    ng-book2-book-angular-6-r70ng

    angular2-registration-login-example, Angular 2/5 用户注册和登录示例.zip

    angular2-registration-login-example, Angular 2/5 用户注册和登录示例 angular2-registration-login-exampleAngular 2/5 用户注册和登录示例&教程要查看演示和进一步详细信息,请访问 ...

    Angular-angular2-style-guide.zip

    Angular-angular2-style-guide.zip,[不推荐]Angular2应用程序开发的社区驱动的最佳实践集和样式指南不推荐,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular...

    Angular-angular2-crud-rest.zip

    Angular-angular2-crud-rest.zip,示例角度(2.x和4.x)app:crud示例 routingangularcrudrest,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是...

    Angular-angular2-aot-webpack.zip

    Angular-angular2-aot-webpack.zip,angular aot(提前)离线编译示例与webpack angular aot(提前)离线编译示例与webpack,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的...

    angular-google-maps, Angular 2 谷歌地图 组件.zip

    angular-google-maps, Angular 2 谷歌地图 组件 AGM - Angular 谷歌地图谷歌地图的Angular 2 组件。 ( 以前称为 angular2-google-maps )注意:项目 NAME 已经从 angular2-google-maps 映射更改到 AGM

Global site tag (gtag.js) - Google Analytics