仿手机通讯录,汽车之家选车频道实现汉字名称首字母排序,字母分组集合

因前端h5页面需求展示,需要按名称首字母排序,并按首字母的展示清单列表


经研究前端实现比较麻烦,还是放到后端利用插件整理好数据到前端展示,如果是原生态那就简单了,后端不用管排序的事儿了。

后端也很简单,下面就是实现的方案:

1、maven下载jpinyin插件,在pom.xml引入jpinyin依赖包,用的最新的1.1.8版本。


2、利用Map存集合的方式实现字母数据分组,以26个字母为key,跟key相同的值放到List,最后迭代keys,取出对应的清单,下附代码:

private static String[] baseCodeArray =  {"A", "B", "C", "D", "E", "F", "G", "H", "I","J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"};

String[] newArray={"宝马","保时捷","奥迪","标志","雪铁龙","马自达","哈弗","大众","宾利","福特","起亚","荣威","路虎","北汽","长城","比亚迪","众泰"};
    Map<String,List<String>> codeMap = new HashMap<String, List<String>>();
    for (int j = 0; j < baseCodeArray.length; j++) {
    String baseCodeKey = baseCodeArray[j];
    List<String> baseCodeValue = new ArrayList<String>();
    for (int i = 0; i < newArray.length; i++) {
String name = newArray[i];
String NameCode = PinyinHelper.getShortPinyin(name).toUpperCase().substring(0, 1);
if (baseCodeKey.equals(NameCode)) {
baseCodeValue.add(name);
}
    }
    codeMap.put(baseCodeKey, baseCodeValue);
}
     
    for (int j = 0; j < baseCodeArray.length; j++) {
    String baseCodeKey = baseCodeArray[j];
    System.out.println("     "+baseCodeKey);
    List<String> result = codeMap.get(baseCodeKey);
    for (String value : result) {
System.out.println("       "+value);
}
    }

3、输出结果:


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
layui是一款基于jQuery的前端UI框架,它提供了丰富的组件和样式,方便开发者快速构建美观的网页界面。如果你想要实现layui仿手机通讯录字母排序的功能,可以按照以下步骤进行: 1. 首先,在HTML页面中引入layui的相关文件: ```html <link rel="stylesheet" href="path/to/layui/css/layui.css"> <script src="path/to/jquery.js"></script> <script src="path/to/layui/layui.js"></script> ``` 2. 在HTML页面中创建一个容器,用于显示通讯录列表: ```html <div id="contactList"></div> ``` 3. 在JavaScript代码中初始化layui,并获取通讯录数据: ```javascript layui.use(['layer', 'element'], function(){ var layer = layui.layer; var element = layui.element; // 获取通讯录数据,这里假设数据为一个包含姓名和首字母的数组 var contacts = [ {name: '张三', initial: 'Z'}, {name: '李四', initial: 'L'}, {name: '王五', initial: 'W'}, // 其他联系人... ]; // 对通讯录数据首字母进行排序 contacts.sort(function(a, b){ return a.initial.localeCompare(b.initial); }); // 遍历通讯录数据,生成HTML代码并插入到容器中 var html = ''; var currentInitial = ''; for(var i = 0; i < contacts.length; i++){ var contact = contacts[i]; if(contact.initial !== currentInitial){ // 如果首字母发生变化,则添加一个标题 html += '<h2>' + contact.initial + '</h2>'; currentInitial = contact.initial; } // 添加联系人姓名 html += '<p>' + contact.name + '</p>'; } $('#contactList').html(html); }); ``` 通过以上代码,你可以实现一个简单的layui仿手机通讯录字母排序的功能。当然,具体的样式和交互效果还需要根据实际需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值