將對象轉換為數組，以便可以對其進行排序？

Question

我有一個我在HTML表中列出的對象。 但是我希望能夠單擊此表中的不同列以根據相關字段對數據進行“排序”。

由於我知道對象沒有排序，因此我需要將其轉換為數組的方式如何？ 然后在重新填充表格之前，我使用href鏈接調用sort函數對數組進行排序。

希望有人能夠闡明我的做法嗎？

這基本上是我走了多遠：

$get = mysql_query("SELECT * FROM game_buildings") or die(mysql_error());
        $i = 0;
        while($row = mysql_fetch_assoc($get)){
            $data[$i][0] = $row['name'];
            $data[$i][1] = $row['id'];
            $i ++;
            }
$data = json_encode($data);
?>
<script>var data = <?echo $data; ?>; </script>

然后是表：

<table id="list" style="width:70%;margin: 0 auto;" border="1">
    <tr>
  <td align="center">
        <a href="#" onclick='javascript:sort('name')'>Name</a>
      </td>
  <td align="center">
        <a href="#" onclick='javascript:sort('type')'>Type</a>
      </td>
    </tr>

<script>
  for(var key in data){
    result += '<tr><td>'+data[key][0]+'</td><td>'+data[key][1]+'</td></tr>';
  }
    document.getElementById('list').innerHTML += result;
</script>


</table>

Answer 1

簡單的for循環怎么樣？

var arr = [];
for (var key in data) {
    arr.push(data[key]);
}

現在使用自定義排序功能對其進行排序（在這種情況下，按名稱排序）：

arr.sort(function(a, b) {
    if (a[0] == b[0]) {
        return 0;
    } else if (a[0] < b[0]) {
        return -1;
    } else {
        return 1;
    }
});

Answer 2

data應該已經是數組。 您可以通過檢查json_encode($data)的輸出來驗證這一點：

<script>var data = [["foo",1],["bar",2],...];</script>

但是， "name"和"type"實際上與它們似乎沒有任何關聯：

onclick="javascript:sort('name')"
onclick="javascript:sort('type')"

您可以通過保留mysql_fetch_assoc結構來更改它：

while($row = mysql_fetch_assoc($get)){
    $data[] = $row;
}

從理論上講，至少，JavaScript的輸出將是：

<script>var data = [{"name":"foo","id":1,"type":...},...];</script>

對於對象數組，可以使用sort方法按內部對象的值對data進行排序：

function sort(key) {
    data = data.sort(function (a, b) {
        var A = a[key], B = b[key];

        if (A < B)
            return -1;
        if (A > B)
            return 1;

        return 0;
    });

    // ...
}

更新表的一種方法是刪除舊行並追加新行（代替上面的// ... ）：

var table = document.getElementById('list');
var oldRows = [].slice.call(table.rows, 1); // 1 = skip the "header" row(s)

for (var r = 0, l = oldRows.length; r < l; r++) {
    oldRows[r].parentNode.removeChild(oldRows[r]);
}

for (var i = 0, l = data.length; i < l; i++) {
    table.innerHTML += '<tr><td>' + data[i].name + '</td><td>' + data[i].id + '</td></tr>';
}

示例： http : //jsfiddle.net/coiscir/GB2v3/1/ （盡管使用“ id”而不是“ type”）

這樣，您還可以從標記中刪除初始循環：

window.onload = function () {
    sort('name');
};

Answer 3

我的不如其他人好： http : //jsfiddle.net/andrewbriggs/xndMQ/4/

可以做的更好，但是我的JavaScript不太好