如果后台传过来的对象,顺序是被打乱的
或者说,对象有多个属性,在这个页面需要按照id排序,在另一个页面需要按照数量排序
这里就利用字符的Unicode属性,进行排序了
sort提供了相关的方法

<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>num</th>
            <th>level</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>
//需要进行排序的数据
var data = [{
    "id": 1,
    "name": "abc",
    "num": 123,
    "level": "一二三四" //Unicode值 \u4e00\u4e8c\u4e09\u56db
}, {
    "id": 5,
    "name": "acb",
    "num": 456,
    "level": "一转" //Unicode值 \u4e00\u8f6c
}, {
    "id": 2,
    "name": "bac",
    "num": 234,
    "level": "成功功" //Unicode值 \u6210\u529f\u529f
}, {
    "id": 3,
    "name": "a12",
    "num": 345,
    "level": "七日" //Unicode值 \u4e03\u65e5
}, {
    "id": 4,
    "name": "a32",
    "num": 567,
    "level": "礼拜" //Unicode值 \u793c\u62dc
}]
//调用排序方法,按照level为关键字进行排序
//true表示升序排序,如果传入false表示降序排序
//第二个参数位置不传值时,默认升序排序
data.sort(sortBy('level', true));
//渲染数据
re(data);

function re(data) {
    var str = "";
    for (var i = 0; i < data.length; i++) {
        str +=
            '<tr>' +
            '    <td>' + data[i].id + '</td>' +
            '    <td>' + data[i].name + '</td>' +
            '    <td>' + data[i].num + '</td>' +
            '    <td>' + data[i].level + '</td>' +
            '</tr>'
    }
    $("tbody").html(str)
}
function sortBy(attr, rev) {
    //第二个参数没有传递 默认升序排列
    if (rev == undefined) {
        rev = 1;
    } else {
        rev = (rev) ? 1 : -1;
    }
    return function (a, b) {
        a = a[attr];
        b = b[attr];
        if (a < b) {
            return rev * -1;
        }
        if (a > b) {
            return rev * 1;
        }
        return 0;
    }
}
  • 按照level排序的结果
  • 汉字排序是按照汉字的Unicode编码进行排序的
  • 目前没找到按照汉字拼音排序的方法,望各位大佬指教
  • 附查询Unicode网址 http://tool.chinaz.com/tools/...

图片描述

  • 按照id排序的结果

图片描述

  • 按照name排序的结果

图片描述

  • 按照num排序的结果

图片描述


神膘护体小月半
406 声望6 粉丝

前端菜菜