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

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

谢谢

JS

---

for（var i=0；i您可以使用
sort
根据
title
对
VideoList
进行排序此代码可能适用于您

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

使用
Lodash
库。它易于使用，运行时效率高。它有一个函数，可用于根据您提供的关键字对集合进行排序

p.S.
Lodash
是我的goto库，用于对任何集合执行任何操作。
这里有一个通用函数供您使用

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

sortBy(VideoList, 'Title');

我同意@manishrw关于lodash的观点。任何数量的库都会让这变得更容易——比如jQuery和Angular。有很多特定于表的库内置了排序功能。但是，我构建它是为了展示如何做到这一点，包括在排序后重新构建表。为此，我必须使用h模拟数据。下面是一个JSFIDLE：


下面是代码：

<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>


var VideoList=[]，
内容,，
字段=[“标题”、“视频ID”、“已上载日期”、“类别”、“时间”、“操作”]，
num=10，
sortField=“Title”，
sortDirection=1，
比较=功能（a，b）{
if（a[sortField]b[sortField]）返回1*sortDirection；
返回0；
},
SORTARY=函数（字段）{
if（sortField===字段）sortDirection=-1*sortDirection；
sortField=字段；
排序（比较）；
buildTable（）；
},
createvideos=函数（）{
对于（变量x=0；x
sort

的回调需要返回+1、0或-1。除非返回-1、0或+1，否则这将无法可靠运行。@torazaburo感谢您的评论。我到目前为止都没有看到它，但我编写了一个更新来解决此问题。这不是多维数组。这是一个对象数组。谢谢，Lodash解决了我的问题

// 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);

<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>