Question

基本上我想要的是根据下面显示的每个项目对这个数组进行排序，除了＆＃34; Action＆＃39;和拇指图像＆＃39;那些。所以我设置它的方式是每个行的标题是一个链接，当点击该链接时，列表将根据点击的内容进行排序。因此，例如，如果单击标题，那么我想要一个＆＃34; titleSort（）＆＃34;将根据标题排序的函数。我不知道如何做到这一点，所以任何帮助都非常感谢。例如，我希望VideoList.sort（Title）能够正常工作。

谢谢，

JS

for(var i = 0; i<VideoList.length; i++) {
    content += "<tr>";
    content += "<td width='20%'><a href='https://www.youtube.com/watch?v=" + VideoList[i].VideoID + "'onclick='playVideo("+i+")'>" + "<img src ='https://i.ytimg.com/vi/" + VideoList[i].VideoID + "/hqdefault.jpg' width=175 height=130></a></td>";
        content += "<td>" + VideoList[i].Title + "</td>";
        content += "<td>" + VideoList[i].VideoID + "</td>";
        content += "<td>" + VideoList[i].DateUploaded + "</td>";
        content += "<td>" + VideoList[i].Category+ "</td>";
        content += "<td>" + VideoList[i].Time+ "</td>";
        content += "<td width='20%'>" + VideoList[i].Action + "</td>";
        content += "</tr>";

Answer 1

您可以使用sort根据此代码可能适合您的VideoList对title进行排序

VideoList.sort(function(a,b){
        return a.Title  > b.Title;
    });

Answer 2

这是您的通用功能

function sortBy(list, field) {
  return list.sort(function(a,b) {
    return a[field] < b[field];
  });
}

sortBy(VideoList, 'Title');

警告： sortBy会改变list输入

您还可以使用比较器，以便控制“方向”。

// you you need to return -1, 0, or 1 for the sort to work reliably
// thanks, @torazaburo
function compareAsc(a,b) {
  if (a < b)      return -1;
  else if (a > b) return 1;
  else            return 0;
}

function compareDesc(a,b) {
  return compareAsc(a,b) * -1;
}

function sortBy(list, field, comparator) {
  return list.sort(function(a,b) {
    if (comparator instanceof Function)
      return comparator(a[field], b[field]);
    else
      return compareAsc(a[field], b[field]);
  });
}

// default sort ascending
sortBy(VideoList, 'Title');

// sort descending
sortBy(VideoList, 'Title', compareDesc);

Answer 3

我同意@manishrw关于lodash的观点。任何数量的库都会使这更容易 - 比如jQuery和Angular。有很多特定于表的库都内置了sort函数。但是，我构建它来展示你如何做到这一点，包括重组表后重新构建表。为此，我必须使用模拟数据创建数组。这是一个jsfiddle：

https://jsfiddle.net/mckinleymedia/c02nqdbz/

这是代码：

<div id="target"></div>
<script>
var VideoList = [],
  content,
  fields = ["Title", "VideoID", "DateUploaded", "Category", "Time", "Action"],
  num = 10,
  sortField = "Title",
  sortDirection = 1,
  compare = function(a, b) {
    if (a[sortField] < b[sortField]) return -1 * sortDirection;
    if (a[sortField] > b[sortField]) return 1 * sortDirection;
    return 0;
  },
  sortArray = function(field) {
    if( sortField === field ) sortDirection = -1 * sortDirection;
    sortField = field;
    VideoList.sort(compare);
    buildTable();
  },
  creatVideos = function() {
    for (var x = 0; x < num; x++) {
      var video = {},
        z = Math.floor(Math.random() * 200);
      for (var i in fields) {
        if(fields[i]==='VideoID') {
        video[fields[i]] = z;
        } else {
        video[fields[i]] = fields[i] + "-" + z;
        }
      }
      VideoList.push(video);
    }
  },
  buildTable = function() {
    content = "<table>";
    content += "<tr>";
    content += "<th>image</th>";
    for (var x in fields) {
      content += "<th class='field field-" + fields[x] + "' onclick='sortArray(\"" + fields[x] + "\")'>" + fields[x] + "</th>";
    }
    content += "</tr>";
    for (var i in VideoList) {
      content += "<tr>";
      content += "<td width='20%'><a href='https://www.youtube.com/watch?v=" + VideoList[i].VideoID + "'onclick='playVideo(" + i + ")'>" + "<img src ='https://i.ytimg.com/vi/" + VideoList[i].VideoID + "/hqdefault.jpg' width=175 height=130></a></td>";
      for (var x in fields) {
        content += "<td>" + VideoList[i][fields[x]] + "</td>";
      }
      content += "</tr>";
    }
    content += "</table>";
    document.getElementById('target').innerHTML = content;
  };

creatVideos();
buildTable();
</script>

Answer 4

使用Lodash库。它易于使用且在运行时有效。它有一个函数sortBy，可用于根据您提供的密钥对集合进行排序。

P.S。 Lodash是我的goto库，用于对任何集合执行的任何操作。

如何使用Javascript中的项目对多维数组进行排序

4 个答案: