前端實作員工串列排序案例
本案例重點在于邏輯處理，對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總后端獲取已經排序好的資料，前端只需要完成渲染即可，
- 鞏固自己的同時，希望能夠幫助大家~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/264849.html
標籤：其他
上一篇：CSS必備基礎知識點