前端实现员工列表排序案例
本案例重点在于逻辑处理，对css样式处理较为简单
1. 实现效果
- 打开进入页面时，年龄和性别都为默认排序
- 用户可按照性别进行筛选排序
- 用户可按照年龄进行筛选排序
- 实现双重排序，即用户可在性别排序的基础上，按照年龄排序；或者在年龄排序的基础上按照性别排序
- 如图所示
2. 写好的元素框架和样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>员工列表</title>
<style>
* {
margin: 0;
padding: 0;
}
body a {
text-decoration: none;
color: #0d3a4b;
}
.active {
color: #4cbfe5;
}
.wrap {
width: 700px;
height: 500px;
/* background-image: url(./images/bg.png); */
background-repeat: no-repeat;
margin: 0 auto;
position: relative;
}
.wrap #table {
width: 460px;
border-radius: 12px;
position: absolute;
left: 50%;
top: 160px;
transform: translateX(-50%);
box-sizing: border-box;
overflow: hidden;
}
.wrap #table thead {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
color: #fff;
background: #4cbfe5;
}
.wrap #table thead a {
color: #fff;
}
.wrap #table tbody {
color: #19c2ff;
}
.wrap #table tbody a {
color: #19c2ff;
}
.wrap #table tbody tr {
background: #fff;
}
.ctrl {
position: absolute;
left: 200px;
top: 100px;
}
.ctrl div {
width: 300px;
line-height: 30px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
</style>
</head>
<body>
<div class="wrap">
<div class="ctrl">
<div class="age_sort nu">
<a href="javascript:;">年龄从小到大</a>
<a href="javascript:;">年龄从大到小</a>
<a href="javascript:;" class="active">默认排序</a>
</div>
<div class="gender_show">
<a href="javascript:;">只显示男性</a>
<a href="javascript:;">只显示女性</a>
<a href="javascript:;" class="active">默认</a>
</div>
</div>
<table id="table">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<th>小明</th>
<th>24</th>
<th>男</th>
</tr>
</tbody>
</table>
</div>
3. 渲染视图功能
- 目标：根据数据做视图的呈现，将数据渲染到视图上。实现年龄和性别筛选的功能
- 养成数据驱动的习惯，将渲染视图的功能封装起来，只关心数据的变化，先更改数据，再更改视图。如果有底层框架，以后写响应式会更加简单。
- 代码如下
let data = [
{
id: 1,
name: '小明',
age: 24,
gender: '男'
},
{
id: 2,
name: '小芳',
age: 30,
gender: '女'
},
{
id: 3,
name: '小美',
age: 31,
gender: '女'
},
{
id: 4,
name: '小刚',
age: 21,
gender: '男'
},
{
id: 5,
name: '小琪',
age: 18,
gender: '女'
}
];
let ageIndex = 2;
let genderIndex = 2;
// 渲染视图；
function renderData(data) {
document.querySelector("tbody").innerHTML = ""; //清空视图
//使用数组方法foreach进行循环
data.forEach(item => {
let tr = document.createElement("tr");
//使用es6语法模板字符串
tr.innerHTML = `<th>${item.id}</th>
<th>${item.name}</th>
<th>${item.age}</th>
<th>${item.gender}</th>`;
document.querySelector("tbody").appendChild(tr);
})
}
//调用renderData方法
renderData(data);
4. 年龄排序数组
-
还是秉承数据优先、数据驱动的策略，按照年龄先把数据排出来
-
把三种排序方法（年龄由大到小、年龄由小到大、默认），这三种函数放在数组ageSortArr中，在js里函数被称为一等功民，因为函数在js中非常神奇，可以当做数据在数组中保存起来。
-
箭头函数的理解
-
使用map循环的原因是因为可以重新映射一份数据出来，不改变原数组不在原数组上进行操作，这样点击默认排序才有意义
-
代码如下
// 年龄排序数组
let ageSortArr = [data => data.map(item => item).sort((r1, r2) => (r1.age - r2.age)), //从小到大
data => data.map(item => item).sort((r1, r2) => (r2.age - r1.age)), //从大到小
data => data.map(item => item)]; //默认
//拿到页面年龄排序点击中获取的a标签
let aEles = document.querySelectorAll(".age_sort a");
// key => i aEle=>aEles[i];
//伪数组解构为数组并循环
[...aEles].forEach((aEle, key) => {
aEle.onclick = function () {
// 点击的高亮的样式添加，未被点击去除高亮样式
aEles.forEach(item => {
item.classList.remove("active");
})
//此时的this指代点击的a元素
this.classList.add("active");
//调用ageSortArr数组中对应的排序函数，获取待渲染的数据
let sortData = ageSortArr[key](data);
// 将年龄排序索引赋值
ageIndex = key;
// 第二次筛选，实现双重排序
let res = genderFilterArr[genderIndex](sortData)
// 渲染视图；
renderData(res);
}
})
5. 性别排序数组
- 代码如下
// 筛选性别数组；
let genderFilterArr = [data => data.filter(item => item.gender === "男"), data => data.filter(item => item.gender === "女"), data => data
];
// let res = genderFilterArr[2](data);
// console.log(res);
let genderEles = document.querySelectorAll(".gender_show a");
[...genderEles].forEach((item,key)=>{
item.onclick = function(){
genderEles.forEach(item => {
item.classList.remove("active");
})
this.classList.add("active");
let newGenderData = genderFilterArr[key](data);
// 将性别索引赋值
genderIndex = key;
// 第二次筛选，实现双重排序
let res = ageSortArr[ageIndex](newGenderData);
renderData(res);
}
})
6. 实现双重排序
- 如何在已经按照年龄排序后，在按照性别筛选，或者已经筛选性别后在按照年龄排序呢？按照数据驱动的策略，其实实现方法非常简单——筛选两次
- 即按照年龄排序后的结果数组，再传入性别筛选函数中，即可实现
- 经过性别筛选后的结果数组，再传入年龄排序函数中，即可实现
- 这里就显示出了数据驱动的好处，只要传入对应的数据和数组，再按照需求对数据进行操作，最后渲染到视图上就可以
- 在上面的代码中已写，对照注释看即可
7. 全部代码附上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>员工列表</title>
<style>
* {
margin: 0;
padding: 0;
}
body a {
text-decoration: none;
color: #0d3a4b;
}
.active {
color: #4cbfe5;
}
.wrap {
width: 700px;
height: 500px;
/* background-image: url(./images/bg.png); */
background-repeat: no-repeat;
margin: 0 auto;
position: relative;
}
.wrap #table {
width: 460px;
border-radius: 12px;
position: absolute;
left: 50%;
top: 160px;
transform: translateX(-50%);
box-sizing: border-box;
overflow: hidden;
}
.wrap #table thead {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
color: #fff;
background: #4cbfe5;
}
.wrap #table thead a {
color: #fff;
}
.wrap #table tbody {
color: #19c2ff;
}
.wrap #table tbody a {
color: #19c2ff;
}
.wrap #table tbody tr {
background: #fff;
}
.ctrl {
position: absolute;
left: 200px;
top: 100px;
}
.ctrl div {
width: 300px;
line-height: 30px;
display: flex;
flex-direction: row;
justify-content: space-around;
}
</style>
</head>
<body>
<div class="wrap">
<div class="ctrl">
<div class="age_sort nu">
<a href="javascript:;">年龄从小到大</a>
<a href="javascript:;">年龄从大到小</a>
<a href="javascript:;" class="active">默认排序</a>
</div>
<div class="gender_show">
<a href="javascript:;">只显示男性</a>
<a href="javascript:;">只显示女性</a>
<a href="javascript:;" class="active">默认</a>
</div>
</div>
<table id="table">
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<th>小明</th>
<th>24</th>
<th>男</th>
</tr>
</tbody>
</table>
</div>
<script>
// 对象数组；
// 数据驱动：只关心数据的变化，先更改数据，然后在更改视图；
// 数据；
let data = [
{
id: 1,
name: '小明',
age: 24,
gender: '男'
},
{
id: 2,
name: '小芳',
age: 30,
gender: '女'
},
{
id: 3,
name: '小美',
age: 31,
gender: '女'
},
{
id: 4,
name: '小刚',
age: 21,
gender: '男'
},
{
id: 5,
name: '小琪',
age: 18,
gender: '女'
}
];
let ageIndex = 2;
let genderIndex = 2;
// 渲染视图；
function renderData(data) {
document.querySelector("tbody").innerHTML = "";
data.forEach(item => {
let tr = document.createElement("tr");
tr.innerHTML = `<th>${item.id}</th>
<th>${item.name}</th>
<th>${item.age}</th>
<th>${item.gender}</th>`;
document.querySelector("tbody").appendChild(tr);
})
}
renderData(data);
// 年龄排序数组
let ageSortArr = [data => data.map(item => item).sort((r1, r2) => (r1.age - r2.age)),
data => data.map(item => item).sort((r1, r2) => (r2.age - r1.age)),
data => data.map(item => item)];
let aEles = document.querySelectorAll(".age_sort a");
// key => i aEle=>aEles[i];
[...aEles].forEach((aEle, key) => {
aEle.onclick = function () {
// 高亮的样式添加
aEles.forEach(item => {
item.classList.remove("active");
})
this.classList.add("active");
// console.log("点击了");
let sortData = ageSortArr[key](data);
ageIndex = key;
let res = genderFilterArr[genderIndex](sortData)
// console.log(sortData);
// 渲染视图；
renderData(res);
}
})
// 筛选性别数组；
let genderFilterArr = [data => data.filter(item => item.gender === "男"), data => data.filter(item => item.gender === "女"), data => data
];
// let res = genderFilterArr[2](data);
// console.log(res);
let genderEles = document.querySelectorAll(".gender_show a");
[...genderEles].forEach((item,key)=>{
item.onclick = function(){
genderEles.forEach(item => {
item.classList.remove("active");
})
this.classList.add("active");
let newGenderData = genderFilterArr[key](data);
// console.log(newGenderData);
genderIndex = key;
let res = ageSortArr[ageIndex](newGenderData);
renderData(res);
}
})
</script>
</body>
</html>
总结
- 这个小案例只是为了阐述数据驱动的思想，于是可以看到使用全局变量genderIndex，ageIndex等全局变量来控制数据；但在常规的项目中是不会出现这样的情况的，常规项目中一般会通过Ajax总后端获取已经排序好的数据，前端只需要完成渲染即可。
- 巩固自己的同时，希望能够帮助大家~
扫一扫
597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
