根据城市名称的首字母,将城市分类

本文实现,根据城市的名称的首字母,将所有城市分类显示到页面。这里只列出部分城市,用来测试效果。

数据库的数据如下图所示:


然后看后台的处理方法

package com.sudytech.action;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;
import java.util.TreeMap;

import org.hibernate.Session;
import org.hibernate.cfg.Configuration;

import com.sudytech.domain.City;

public class CityGroup {

	public static void main(String args[]){

		getCityGroup();
		
	}
	
	/**
	 * 获得所有城市,为了按A-Z的顺序存入map集合中,所以查询的时候按拼音排序 
	 * @return
	 */
	public static List<City> getAllCity(){
		List<City> list=new ArrayList<City>();
		Session session=null;
		session=new Configuration().configure().buildSessionFactory().openSession();
		String sql="from City where 1=1 order by pinyin";
		list=session.createQuery(sql).list();
		return list;
	}
	
	/**
	 * 按字母分类,将不同字母开头的城市,放到不同的集合中,并将这些集合存放到以A-Z为key的map集合中 ,因为取出来的时候要按照A-Z的顺序取出,因此,用TreeMap集合存放数据
	 */
	public static void getCityGroup(){
		List<City> list=new ArrayList<City>();
		Map<String,List<City>> map=new TreeMap<String,List<City>>();//分组后的城市集合
		String arr[]={"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"};
		
		//创建不同key的map集合,Map("A",list1),Map("B",list2)
		for(int i=0;i<arr.length;i++){
			map.put(arr[i],new ArrayList<City>());
		}
		
		list=getAllCity();
		
		for(City c:list){
			String pinyin=c.getPinyin().substring(0, 1).toUpperCase();
			if(map.containsKey(pinyin)){
				map.get(pinyin).add(c);
			}
		}

		//遍历打印出集合中的值
		Set<Map.Entry<String, List<City>>> set=map.entrySet();
		for(Map.Entry<String, List<City>> m:set){
			if(m.getValue()!=null && m.getValue().size()>0){
				//key下面的集合不为空,才显示首字母以及下面的城市
				System.out.println("========="+m.getKey()+"========");
				for(City c:m.getValue()){
					System.out.println(c.getName());
				}
			}
		}
	}
}


下面是打印的结果:


页面就不写了,页面按照同样的方式,把城市显示出来就行了。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端实现字母定位到指定城市需要使用一些 JavaScript 和 CSS 技术,下面是一个简单的示例代码: HTML 代码: ``` <div class="city-list"> <div class="alphabet"> <a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> ... </div> <div class="cities"> <h2 id="A">A</h2> <ul> <li>北京</li> <li>上海</li> ... </ul> <h2 id="B">B</h2> <ul> <li>包头</li> <li>保定</li> ... </ul> <h2 id="C">C</h2> <ul> <li>成都</li> <li>重庆</li> ... </ul> ... </div> </div> ``` CSS 代码: ``` .city-list { display: flex; } .alphabet { flex: 0 0 30px; text-align: center; } .alphabet a { display: block; margin: 5px 0; } .cities { flex: 1; } .cities h2 { margin-top: 20px; } .cities ul { list-style: none; padding: 0; margin: 0; } .cities li { padding: 5px; } ``` JavaScript 代码: ``` // 获取所有标题的元素 var headers = document.querySelectorAll('.cities h2'); // 获取所有标题的位置 var positions = []; for (var i = 0; i < headers.length; i++) { positions.push(headers[i].offsetTop); } // 获取所有字母的链接 var links = document.querySelectorAll('.alphabet a'); // 给每个链接添加点击事件 for (var i = 0; i < links.length; i++) { links[i].addEventListener('click', function(event) { // 阻止默认行为 event.preventDefault(); // 获取字母 var letter = event.target.textContent; // 查找第一个标题的位置大于等于当前字母的位置 var index = positions.findIndex(function(position) { return position >= document.getElementById(letter).offsetTop; }); // 没有找到则滚动到最后一个标题 if (index === -1) { index = headers.length - 1; } // 滚动到标题位置 window.scrollTo(0, positions[index]); }); } ``` 这段代码的实现思路是,首先获取所有标题的位置,然后给字母链接添加点击事件,当点击链接时,查找第一个标题的位置大于等于当前字母的位置,然后滚动到该位置。由于移动端屏幕较小,这里使用了 flex 布局将字母列表和城市列表分别放在一行中,方便用户操作。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值