Question

我有一个我在HTML表格中列出的对象。但我希望能够点击此表中的不同列，根据相关字段对数据进行“排序”。

由于我知道对象没有排序，所以我需要将它转换为数组如何？然后我使用href链接调用排序函数来重新填充表之前对数组进行排序。

希望有人可以解释我是如何做到的？

这基本上是我得到了多远：

$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 method按内部对象的值对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上并不擅长

将对象转换为数组，以便我可以对它进行排序？

3 个答案: