工作总结：按字母排序下拉框，点击首字母，跳转到对应位置

最新推荐文章于 2024-07-05 10:02:45 发布

liyunhe8451

最新推荐文章于 2024-07-05 10:02:45 发布

阅读量2.8k

点赞数

分类专栏：工作总结文章标签：工作

本文链接：https://blog.csdn.net/liyunhe8451/article/details/78332726

版权

这篇博客介绍了如何实现按首字母排序的下拉框功能，涉及SQL改造、后台数据处理及前端样式和交互。通过转换数据库字段编码，对数据进行A-Z排序，然后在前端实现点击首字母跳转到对应位置，以及处理无对应值的首字母显示。

摘要由CSDN通过智能技术生成

应需求要求，最近要做一个类似于手机端首字母排序的下拉框。
这里写图片描述
整理了一下思路，大概分为一下几个步骤：

由于数据库中的字段没有存首字母的信息，所以要将sql改造
在后台处理相关数据，将取得的数据按英文字母排序
前台写一个统一的js方法，以便不同位置统一调用

其实后台和sql语句没有什么难点，主要是前端的样式，滚动条滚动，点击跳转滚动条。
1）sql

SELECT 
ID AS id, BRAND AS value,
CONV(HEX(left(CONVERT(BRAND USING gbk),1)),16,10) AS initial
FROM xxx WHERE 1=1
GROUP BY BRAND
ORDER BY initial

由于数据库表中没有存该字段的首字母信息，所以在查询的时候将首字母的信息查询出来。brand这个字段包括首字母包含中文英文和数字，所以要转为一个有中文的编码。

CONVERT(BRAND USING gbk) :将要查询的字段（BRAND）转换为gbk编码
left(CONVERT(BRAND USING gbk),1) :返回字符串的前一个字符
HEX(x):返回x的十六进制编码
CONV(x,f1,f2):返回f1进制x的f2进制编码

查询的结果大概是这样的，将结果放入List<Map>中
这里写图片描述

2）处理数据
数据展示是按照A-Z排序，所以想了一下后台传过的数据大概是

[
'A':[],
'B':[],
'C':[],
'D':[],
……
]

此时从数据库查询出来的数据的首字母信息是数字形式的编码形式，对这种编码进行处理，返回首字母大写
strChinese是数据库查询出的initial字段

 public static String  getPYIndexChar(int strChinese, boolean bUpCase) {
        int charGBK = strChinese;
        String result;
        if((charGBK & 255) <= 128){
            return String.valueOf((char)charGBK).toUpperCase();
        }
        if (charGBK >= 45217 && charGBK <= 45252)
            result = "A";
        else if (charGBK >= 45253 && charGBK <= 45760)
            result = "B";
        else if (charGBK >= 45761 && charGBK <= 46317)
            result = "C";
        else if (charGBK >= 46318 && charGBK <= 46825)
            result = "D";
        else if (charGBK >= 46826 && charGBK <= 47009)
            result = "E";
        else if (charGBK >= 47010 && charGBK <= 47296)
            result = "F";
        else if (charGBK >= 47297 && charGBK <= 47613)
            resu