Question

我有一个有数组的应用程序（selectedTiles）。数组中的每个Tile都有2个属性，用于指定该图块在页面布局上的位置（ Col （umn）和行）。

<div gridster>
    <ul>
        <li gridster-item="item" ng-repeat="tile in selectedTiles"></li>
    </ul>
</div>

问题行为 当我移动图块时（例如：交换两个图块），'tile.col'和'tile.row'属性会更改每个图块的值以对应新的网格位置。但是索引数组的顺序保持不变。如果键盘导航在下一个索引位置移动到下一个图块，则会使键盘导航无序。

*目标行为因此，我需要创建一个新的数组，将SelectedTiles中的每个tile推送到一个新的数组中，该数组接受tile.col和tile.row属性并对它们进行排序，如下所示：

$scope.selectedTiles = [
  { row: 0, col: 0 },
  { row: 0, col: 1 },
  { row: 0, col: 2 },
  { row: 0, col: 3 }.
  { row: 1, col: 0 },
  { row: 1, col: 1 },
  { row: 1, col: 2 },
  { row: 1, col: 3 },
  { row: 2, col: 0 },
  { row: 2, col: 1 },
  { row: 2, col: 2 },
  { row: 2, col: 3 }
];

这样，索引顺序遵循以下模式：将每个最左边的tile作为索引[0]，将最底部的tile作为每次移动tile时数组中的最后一个索引。

我不知道该怎么做

Answer 1

如果我正确理解了您的问题，那么您尝试在更改后的行/列值对数组进行排序。以下是一种方法。我已经为每个元素添加了id属性，只是为了使显而易见的事情发生。

function compare(a, b) {
  if (a.row < b.row) {
    return -1;
  } else if (a.row > b.row) {
    return 1;
  } else {
    if (a.col < b.col) {
      return -1;
    } else if (a.col > b.col) {
      return 1;
    } else {
      return 0;
    }
  }
}

var newItems = items.sort(compare);

console.log(JSON.stringify(newItems));

让我们说一些行/列值已被更改，然后它会对此进行排序：

var items = [
      { row: 2, col: 3, id: 1 },
      { row: 0, col: 1, id: 2 },
      { row: 0, col: 2, id: 3 },
      { row: 0, col: 3, id: 4 },
      { row: 1, col: 0, id: 5 },
      { row: 1, col: 1, id: 6 },
      { row: 1, col: 2, id: 7 },
      { row: 1, col: 3, id: 8 },
      { row: 2, col: 2, id: 9 },
      { row: 2, col: 1, id: 10 },
      { row: 2, col: 0, id: 11 },
      { row: 0, col: 0, id: 12 }
      ];

进入下面（然后你可以将它复制回你需要在屏幕上反映它的任何结构）：

[
{"row":0,"col":0,"id":12},
{"row":0,"col":1,"id":2},
{"row":0,"col":2,"id":3},
{"row":0,"col":3,"id":4}, 
{"row":1,"col":0,"id":5},
{"row":1,"col":1,"id":6},
{"row":1,"col":2,"id":7},
{"row":1,"col":3,"id":8},
{"row":2,"col":0,"id":11},
{"row":2,"col":1,"id":10},
{"row":2,"col":2,"id":9},
{"row":2,"col":3,"id":1}
]

Answer 2

这是一个很好的函数，可以通过多个属性（升序或降序）对对象数组进行排序。一个例子是函数的doc字符串。

function dynamicSort(property) {
  var sortOrder = 1;
  if(property[0] === "-") {
    sortOrder = -1;
    property = property.substr(1);
  }
  return function (a,b) {
    var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
    return result * sortOrder;
  }
} // dynamicSort()

function dynamicSortMultiple() {
  /*
   * save the arguments object as it will be overwritten
   * note that arguments object is an array-like object
   * consisting of the names of the properties to sort BY
   *
   * Example:
   *
   * var People = [
   *   {Name: "Name", Surname: "RRR"},
   *   {Name: "AAA",  Surname: "ZZZ"},
   *   {Name: "Name", Surname: "AAA"},
   *   {Name: "Name", Surname: "MPF"},
   *   {Name: "AAA",  Surname: "YYY"}
   * ];
   * People.sort(dynamicSort("Surname"));
   * People.sort(dynamicSortMultiple("Name", "-Surname"));
   */
  var props = arguments;
  return function (obj1, obj2) {
    var i = 0, result = 0, numberOfProperties = props.length;
    /* try getting a different result from 0 (equal)
     * as long as we have extra properties to compare
     */
    while(result === 0 && i < numberOfProperties) {
      result = dynamicSort(props[i])(obj1, obj2);
      i++;
    }
    return result;
  }
} // dynamicSortMultiple()

原帖：Sort array of objects by string property value in JavaScript

在拖放图块后如何动态重新排序数组？

2 个答案: