现在很多vue/react等js框架配套的UI框架，表格自带点击表头排序的动能。
后来小想了js/jq 手写的话，逻辑上如何实现。就写了个小demo，这里共享下。
这是一个小白demo。
1. 说明
1）页面预设布局
页面上事先给出表头，具体html代码如下：
其中表头的key属性作用后面说明。
<!DOCTYPE html>
<html>
<head>
<title>demo2</title>
</head>
<body>
<p>点击表头，会根据当前列，切换排序。</p>
<table id="baseTable" border="1">
<thead>
<th style="color:#ccc;">序号</th>
<th key="id">id</th>
<th key="name">姓名</th>
<th key="age">年龄</th>
<th key="status">状态</th>
</thead>
<tbody></tbody>
</table>
<script src="./jquery-2.0.3.min.js"></script>
<script>
/** javaScript code....*/
<script>
</body>
</html>
2）关于数据：数据就是个数组对象。具体如下people数组：
var people = [
{
id: '001',
name: 'celine',
age: '18',
status: 2
},
{
id: '003',
name: 'apple',
age: '16',
status: 0
},
{
id: '002',
name: 'andy',
age: '22',
status: 1
},
{
id: '005',
name: 'hunter',
age: '1',
status: 0
},
{
id: '004',
name: 'redis',
age: '15',
status: 1
},
{
id: '019',
name: 'mango',
age: '18',
status: 0
},
];
3）数据渲染方式
此处采用的是遍历数据，拼接字符串后，append到页面的<body></body>中。
具体的生成表格函数如下：
function getbaseList(ary) {
var html = '';
for (var i=0 ; i<ary.length; i++){
var status = '';
switch(ary[i].status){
case 1: status = '普通活跃'; break;
case 2: status = '特别活跃'; break;
default: status = '不活跃';
}
html += '<tr>';
html += '<td>' + (i+1) + '</td>';
html += '<td>' + ary[i].id + '</td>';
html += '<td>' + ary[i].name + '</td>';
html += '<td>' + ary[i].age + '</td>';
html += '<td>' + status + '</td>';
html += '</tr>';
}
$('#baseTable tbody').empty().append(html);
}
2. 思路
因为表格数据是遍历数组动态创建，所以可以考虑在点击表头的时候，对数据进行排序。
对数据排序需要考虑两个关键点：
- 对哪个字段进行排序？
- 是正序（ASC）还是逆序（DESC）？
1）要排序的字段
先考虑要对哪个字段进行排序。这个由点击事件决定，点击哪一个表头，就是对那一列数据排序。所以我们可以考虑在表头标签中存储对应的字段属性——也就是下面代码中的key属性。
<th key="id">id</th>
<th key="name">姓名</th>
<th key="age">年龄</th>
<th key="status">状态</th>
属性值则对应数据people里面的对象属性。
2）正序还是逆序
和上面类似，想要知道当前表头字段是正序还是逆序，也只需要在表头标签中存储一个排序属性——sort属性。因为初始化的数据 people是乱序的，所以不需要预设sort属性。可以在点击事件排序时，再进行设置。
比如下面点击事件代码，当逆序排序后，预设sort为正序（确保下一次点击做的是正序排序）；当正序排序后，预设sort为逆序。
$('#baseTable th').on('click', function(){
var sort_ary;
if ($(this).attr('sort') == 'desc') {
// 逆序排序
sort_ary = people.sort(compare($(this).attr('key'),-1));
getbaseList(sort_ary);
// 切换sort属性的值，预设下一次点击是正序
$(this).attr('sort', 'asc');
} else {
// 正序排序
sort_ary = people.sort(compare($(this).attr('key'),1));
getbaseList(sort_ary);
// 切换sort属性的值，预设下一次点击是正序
$(this).attr('sort', 'desc');
}
});
3. 排序函数
此处的排序函数，我们直接使用sort()方法。
这个排序方法需要注意的是：字符串排序，还是数值排序。
还要考虑需要传入什么参数：要排序的字段 prop、正序/逆序 type。
/**
* 比较函数
* @param {string} prop 数据里面要排序的key
* @param {number} type 1:asc -1:desc
* @return {number}
*/
function compare(prop,type) {
return function (obj1, obj2) {
var val1 = obj1[prop];
var val2 = obj2[prop];
if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
val1 = Number(val1);
val2 = Number(val2);
}
if (val1 < val2) {
return 0-type;
} else if (val1 > val2) {
return type;
} else {
return 0;
}
}
}
4. 结语
自此就完成了一个简易版点击表头排序，详细代码详见 table-sort.html。
当然，这不是最简洁的方式，有看到小伙使用reverse()方法 JavaScript-点击表格的表头进行排序
网友评论