zoukankan      html  css  js  c++  java

  • 自定义排序方法

    　　主要记录一下实际项目开发中遇到的需要自定义排序的问题的解决方法：

    　　一、代码

     1 /**
 2    * 自定义排序方式,sortArr为数据的排列顺序
 3    * @param data  待排序数组
 4    * @param fieldName 待排序字段
 5    * @param sortMathod 排序方式，"ascend"：升序，其他为降序
 6    */
 7   mySort(data: any, fieldName: string, sortMathod: string) {
 8     const sortArr = ["S1", "S2", "S3", "S4", "S5", "ROW total cost", "ROW total CA", "ROW Per Unit Cost", "S6", "PRC-B2B total cost", "PRC-B2B total CA", "RPC-B2B Per Unit Cost", "S7", "PRC-B2C total cost", "PRC-B2C total CA", "PRC-B2C Per Unit Cost"];
 9     let tem_sort_arr = sortMathod === "ascend" ? [...sortArr] : [...sortArr.reverse()];
10 
11     return data.sort(function (a, b) {
12       if (tem_sort_arr.indexOf(a[fieldName]) < tem_sort_arr.indexOf(b[fieldName])) {
13         return -1;
14       } else if (tem_sort_arr.indexOf(a[fieldName]) > tem_sort_arr.indexOf(b[fieldName])) {
15         return 1;
16       } else {
17         return 1;
18       }
19     });
20   }

    　　说明：

      1. 通过数组记录自定义的排列顺序，如：
    sortArr = ["S1", "S2", "S3", "S4", "S5", "ROW total cost", "ROW total CA", "ROW Per Unit Cost", "S6", "PRC-B2B total cost", "PRC-B2B total CA", "RPC-B2B Per Unit Cost", "S7", "PRC-B2C total cost", "PRC-B2C total CA", "PRC-B2C Per Unit Cost"];
    1. 通过数据在 sortArr 中的下标进行排序 
    2. 调用方式 

    　　　　  mysort(this.testData,"scenario","ascend")

    　　　　

    二、排序前数据打印, this.testData

     1 {
 2     "result": [{
 3         "scenario": "PRC-B2B total CA",
 4         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
 5     }, {
 6         "scenario": "PRC-B2B total cost",
 7         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
 8     }, {
 9         "scenario": "PRC-B2C Per Unit Cost",
10         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
11     }, {
12         "scenario": "PRC-B2C total CA",
13         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
14     }, {
15         "scenario": "PRC-B2C total cost",
16         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
17     }, {
18         "scenario": "ROW Per Unit Cost",
19         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
20     }, {
21         "scenario": "ROW total CA",
22         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
23     }, {
24         "scenario": "ROW total cost",
25         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
26     }, {
27         "scenario": "RPC-B2B Per Unit Cost",
28         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
29     }, {
30         "scenario": "S1",
31         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
32     }, {
33         "scenario": "S1",
34         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
35     }, {
36         "scenario": "S2",
37         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
38     }, {
39         "scenario": "S2",
40         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
41     }, {
42         "scenario": "S2",
43         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
44     }, {
45         "scenario": "S2",
46         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
47     }, {
48         "scenario": "S3",
49         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
50     }, {
51         "scenario": "S4",
52         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
53     }, {
54         "scenario": "S6",
55         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
56     }, {
57         "scenario": "S6",
58         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
59     }, {
60         "scenario": "S7",
61         "taskId": "e1440c1c-3e4e-4489-b140-6159aec4fcb6"
62     }],
63     "code": 0
64 }
    View Code

    三、排序后的效果图　　

     　　　　　　　　　　

     
  • 相关阅读:
    Redis 之服务器集群配置
    Redis 之持久化（rdb、aof）
    Redis 之消息发布与订阅（publish、subscribe）
    Redis事物及锁的运用
    Redis 之hash集合结构及命令详解
    对Ul下的li标签执行点击事件——如何获取你所点击的标签
    .net 面试题(3)
    SQL Server 系统时间
    分布式内存对象缓存 memcached
    MVC 模板页和布局
  • 原文地址：https://www.cnblogs.com/mycnblogs-guoguo/p/12456797.html
Copyright © 2011-2022 走看看