Question

我正在制作一张可排序的桌子。表数据来自对象数组。我需要能够根据属性

对数组进行排序

对象如下所示：

{
"AbsenceReservationID": 7220,
"Name": "DGM",
"Code": "ARBEIDSONGEVAL WP",
"RequestState": "Goedgekeurd",
"From": "2017-03-21T00:00:00+01:00",
}

我正在使用 lodash ，因此我可以使用以下语法轻松对数组进行排序：

ASC：

myArr = _.sortBy(myArr , "Name");

递减：

myArr = _.sortBy(myArr , "Name").reverse;

但是我坚持最后的排序方法。我需要能够撤消排序，但我无法找到一个好方法来做到这一点。以下是它的工作原理：

第一次点击 - 排序asc
第二次点击 - 排序desc
第三次点击 - 删除排序在这个属性

我认为困难的部分是当用户对多个属性进行排序时，例如

如何实现删除属性排序？

Answer 1

你基本上有三个选择：

不要提供＆＃34;未分类＆＃34;选项
记住原始订单（可能是为它添加一个属性），以及＆＃34;未排序＆＃34;选项，对该属性进行排序

例如，您可以添加originalIndex属性：
```
_.forEach(myArr, function(e, i) { e.originalIndex = i; });
```
然后myArr = _.sortBy(myArr, "originalIndex");将获得原始订单。
将原始数组保留在某处（因为_.sortBy创建副本），并在需要＆＃34;未排序＆＃34;时再次使用原始数组。版本

Answer 2

您可以用来创建原始副本：

var oldArr = myArr.slice(); // gives you a new copy.

排序后可以使用oldArr。

Answer 3

您从哪里获取最初的数据？（服务）

如果它来自服务电话 - 建议只需重新调用该服务并将数据设置为等于再次检索的数据。

如果您不想再次调用该服务，只需在JS sortingData 和 unsortedData 中创建两个对象。然后，当您使用lodash方法时，只需将其仅应用于 sortingData 数组。在第三次单击时，执行

table.level_1 > tbody > tr > td { border-color: green; }
table.level_2 > tbody > tr > td { border-color: blue; }
table.level_3 > tbody > tr > td { border-color: red; }

您从哪里获取最初的数据？（手动创建）

这里有两个对象的相同方法。创建数据后，在允许排序之前，将 unsortedData 设置为您生成的数据。 e.g。

sortingData = unsortedData;

JavaScript - 撤消数组的排序

3 个答案: