1

正常后端的SQL排序

  • 正常排序,前端发请求,将排序字段和排序方式(升序or降序)传给后端
  • 后端接口收到相关参与,执行SQL语句查询数据库并返回,如:
  • SELECT * FROM table ORDER BY ${req.query.sortWord} ${req.query.sortOrder}

若是排序中夹杂着中文排序,如笔者的这个网站效果:http://ashuai.work:8889/

效果图如下:

image.png

  • 就要使用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>

水冗水孚
1.1k 声望584 粉丝

每一个不曾起舞的日子,都是对生命的辜负