ECS6前端实现员工列表排序案例

Z时代
2024-01-10
分类：技术分享

前端实现员工列表排序案例

本案例重点在于逻辑处理，对css样式处理较为简单

1. 实现效果

打开进入页面时，年龄和性别都为默认排序

用户可按照性别进行筛选排序

用户可按照年龄进行筛选排序

实现双重排序，即用户可在性别排序的基础上，按照年龄排序；或者在年龄排序的基础上按照性别排序

如图所示

2. 写好的元素框架和样式

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-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>
<divclass="wrap">
<divclass="ctrl">
<divclass="age_sort nu">
<ahref="javascript:;">年龄从小到大</a>
<ahref="javascript:;">年龄从大到小</a>
<ahref="javascript:;"class="active">默认排序</a>
</div>
<divclass="gender_show">
<ahref="javascript:;">只显示男性</a>
<ahref="javascript:;">只显示女性</a>
<ahref="javascript:;"class="active">默认</a>
</div>
</div>
<tableid="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;
// 渲染视图；
functionrenderData(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>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-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>
<divclass="wrap">
<divclass="ctrl">
<divclass="age_sort nu">
<ahref="javascript:;">年龄从小到大</a>
<ahref="javascript:;">年龄从大到小</a>
<ahref="javascript:;"class="active">默认排序</a>
</div>
<divclass="gender_show">
<ahref="javascript:;">只显示男性</a>
<ahref="javascript:;">只显示女性</a>
<ahref="javascript:;"class="active">默认</a>
</div>
</div>
<tableid="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;
// 渲染视图；
functionrenderData(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>