自定义排序方法

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

　　一、代码

 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

 

三、排序后的效果图　　

 　　　　　　　　　　

 
posted @ 2020-03-10 16:59  小小飞郭  阅读(893)  评论(0)  编辑  收藏  举报