例子:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
.select {
position: relative;
display: inline-block;
width: 200px;
height: 30px;
outline: none;
background: #f5fafe;
color: #555555;
font-size: 18px;
line-height: 30px;
border: 1px solid #cad9ea;
text-indent: 15px;
}
.select option {
text-indent: 15px;
}
.select option:hover {
background-color: #ff8800;
color: #fff;
}
table {
width: 100%;
font-size: 16px;
table-layout: fixed;
empty-cells: show;
border-collapse: collapse;
margin: 20px auto;
border: 1px solid #cad9ea;
color: #666;
}
th {
background: linear-gradient(#f3faff, #f5fafe);
height: 40px;
overflow: hidden;
}
td {
height: 30px;
text-align: center;
}
td, th {
border: 1px solid #cad9ea;
padding: 0 1em 0;
}
tr:nth-child(odd) {
background-color: #f5fafe;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/template" id="dataItem">
<tr>
<td>name</td>
<td>age</td>
<td>sex</td>
<td>weight(kg)</td>
<td>school</td>
<td>looking</td>
<td>job</td>
</tr>
</script>
<script>
(function () {
var sortBy = function (list, attrName, order) {
console.log(attrName)
console.log(order)
return list
.slice()
.sort(function (left, right) {
var a = left[attrName];
var b = right[attrName];
if (a > b || a === void 0) return 1 * order;
if (a < b || b === void 0) return -1 * order;
return -1 * order;
});
};
var template = function (string, user) {
return string.replace('name', user.name)
.replace('age', user.age)
.replace('sex', user.sex)
.replace('weight', user.weight)
.replace('school', user.school)
.replace('looking', user.looking)
.replace('job', user.job);
};
var getSortedString = function (string, data, select) {
var str = '';
var order = parseInt($('#order').val(), 10);
if (select !== '-1') {
data = sortBy(data, select, order);
}
data.forEach(function (user) {
str += template(string, user);
});
return str;
};
window.getSortedString = getSortedString;
})();
$(function () {
var list = [{
name: 'div教程',
age: 25,
sex: '男',
weight: 60,
school: '蚂蚁部落',
looking: '标准',
job: '前端工程师'
}, {
name: 'css教程',
age: 24,
sex: '女',
weight: 56,
school: '蚂蚁部落',
looking: '上等',
job: '后台'
}, {
name: 'ajax教程',
age: 27,
sex: '男',
weight: 80,
school: '',
looking: '中下',
job: '前端工程师'
}, {
name: 'js教程',
age: 22,
sex: '女',
weight: 54,
school: '青岛科技大学',
looking: '美丽',
job: '前端工程师'
}, {
name: 'softwhy.com',
age: 20,
sex: '男',
weight: 70,
school: '青岛大学',
looking: '中等',
job: '后台开发'
}, {
name: 'css3教程',
age: 19,
sex: '女',
weight: 55,
school: '清华',
looking: '上等',
job: '美工'
}, {
name: 'json教程',
age: 28,
sex: '女',
weight: 65,
school: '海洋大学',
looking: '漂亮',
job: '美工'
}];
var fillData = function (select) {
var str = getSortedString(string, list, select);
console.log(str)
$('#table tr').not('.head').remove();
$('#table').append(str);
};
var string = $('#dataItem').html();
console.log(string)
$('#select').change(function () {
var select = $(this).val();
console.log(select)
fillData(select);
});
$("#order").change(function () {
$("#select").trigger("change");
});
fillData('-1');
});
</script>
</head>
<body>
<select class="select" id="select">
<option value="-1">请选择排序方式</option>
<option value="name">姓名</option>
<option value="age">年龄</option>
<option value="sex">性别</option>
<option value="weight">体重</option>
<option value="school">学校</option>
<option value="looking">相貌</option>
<option value="job">职业</option>
</select>
<select class="select" id="order">
<option value="1">升序</option>
<option value="-1">降序</option>
</select>
<table summary="人员信息表" id="table">
<tr class="head">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>体重</th>
<th>学校</th>
<th>相貌</th>
<th>职业</th>
</tr>
</table>
</body>
</html>
关键代码
/**
*
* @param {ArrObj} list 当前的数组对象
* @param {string} attrName 需要排序的name 表格字段的key
* @param {int} order 升序还是降序 升序为1 降序为-1
*/
function tableSort(list,attrName,order){
return list
.slice()
.sort(function (left, right) {
var a = left[attrName];
var b = right[attrName];
if (a > b || a === void 0) return 1 * order;
if (a < b || b === void 0) return -1 * order;
return -1 * order;
});
}
网友评论