正常后端的SQL排序
- 正常排序，前端发请求，将排序字段和排序方式（升序or降序）传给后端
- 后端接口收到相关参与，执行SQL语句查询数据库并返回，如：
SELECT * FROM table ORDER BY ${req.query.sortWord} ${req.query.sortOrder}
若是排序中夹杂着中文排序，如笔者的这个网站效果：ashuai.work:8889/
效果图如下：
- 就要使用
ORDER BY CONVERT(ColumnName USING gbk)函数了 - 后端直接把前端的请求参数拼接sql，执行即可
如：select * from table ORDER BY CONVERT( ${req.query.sortWord} USING gbk ) ${req.query.sortOrder}
某些情况中文拼音排序
- 某些场景下，需要前端去使用中文拼音去进行排序
- 前端是没有sql语句能够用的，不过js提供了一个
localCompare方法可使用
localCompare方法
- local是当地的意思
- compare是比较的意思
- 就是用当地的语言编码字符习惯进行比较
中文就是拼音前后比较【带四声前后】
let str1 = '阿'
let str2 = '波'
let str3 = '词'
let result1 = str1.localeCompare(str2)
let result2 = str2.localeCompare(str1)
let result3 = str3.localeCompare(str3)
console.log('result1', result1); // -1
console.log('result2', result2); // 1
console.log('result3', result3); // 0
/*
返回 -1 代表 按照拼音顺序 '阿'排在'波'前面
返回 1 代表 按照拼音顺序 '波'排在'阿'前面
返回 0 代表 按照拼音顺序 位置相同
*/
- 搭配sort方法就可以实现中文排序了
- 为了更直观的看到效果，笔者写了一个小demo
- 如下效果图
案例效果图
案例demo代码
复制粘贴跑一下，顺带回顾一下js知识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击切换排序</button>
<h2 label="标题">---排序---</h2>
<script>
// 获取当前页面的最后一个h2元素
function getLastH2() {
const h2List = document.querySelectorAll('h2')
return Array.from(h2List).at(-1)
}
// 把新dom元素追加在目标dom元素后【原生js只有insertBefore方法，insertAfter要自己写】
function insertAfter(newDom, targetDom) {
let parent = targetDom.parentNode; // 得到父级元素
if (parent.lastChild == targetDom) {
// 若当前目标元素是最后一个，直接追加即可
parent.appendChild(newDom);
} else {
// 若当前目标不是最后一个，就在目标的后面之前加一个（即往后平级追加）
parent.insertBefore(newDom, targetDom.nextSibling);
}
}
// 清空除去label的所有h2
function removeH2WithoutLabel() {
const h2List = document.querySelectorAll('h2')
Array.from(h2List).forEach((h2) => {
if (!h2.hasAttribute('label')) {
h2.parentNode.removeChild(h2);
}
})
}
let isAsc = true // 默认拼音正序
const btn = document.querySelector('button')
let textArr = ['阿', '波', '词', '得', '鹅', '佛', '格', '河']
btn.onclick = () => {
removeH2WithoutLabel()
textArr.sort((a, b) => {
if (isAsc) {
return a.localeCompare(b) // 正序
} else {
return b.localeCompare(a) // 倒序
}
});
isAsc = !isAsc
textArr.forEach((text) => {
let h2Dom = document.createElement('h2')
h2Dom.innerText = text
const lastH2 = getLastH2()
insertAfter(h2Dom, lastH2)
})
}
</script>
</body>
</html>
A bad pen is better than a good memory...
