选择城市组件(多选)

阅读更多

效果：

 

 

1、在页面引入css和js文件：

2、指定输入框：

$(function(){
	var city = $("#city").FlCheckBox({
		width:$("#city").width(),
		height:300,
		eventType:"click", //事件类型 支持focus click hover
		targetId:"fl-ckb-city",//弹出层
		position:"1-4",
		value:""
	});
		
	$("#choose_city").click(function(){
		city.click();
	});
});

 3、输入框：

 

    
	
	

		
		

			
			
					
						
							
						
						

				

						

							${o.ch}
						

					
					

						
						${fn:replace(o.cityname,'市','')}
					
					
				
				
			
		
	

 4、数据源“cityListCh”：

//[{fconfigid=69288840, ch=a, cityname=安庆市}, {fconfigid=226719382, ch=a, cityname=安顺市}, {fconfigid=166004284, ch=a, cityname=鞍山市}]
List> cityListCh = findcityList();
//对城市列表按名称的首字拼音进行排序
model.addAttribute("cityListCh", PinyinHelperUtils.cityListCh(cityListCh));

 

    ***对城市列表按名称的首字拼音进行排序：

import java.util.Collections;
import java.util.Comparator;
import java.util.List;
import java.util.Map;

import net.sourceforge.pinyin4j.PinyinHelper;
import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType;
import net.sourceforge.pinyin4j.format.HanyuPinyinOutputFormat;
import net.sourceforge.pinyin4j.format.HanyuPinyinToneType;
import net.sourceforge.pinyin4j.format.exception.BadHanyuPinyinOutputFormatCombination;

import org.apache.commons.lang.StringUtils;

import com.google.common.collect.Lists;
import com.google.common.collect.Maps;

public class PinyinHelperUtils {
  
  private static Map firstLetterMap = Maps.newHashMap();
  
  static {
    firstLetterMap.put("重庆", "C");
    firstLetterMap.put("长沙", "C");
    firstLetterMap.put("长春", "C");
    firstLetterMap.put("厦门", "X");
  }
  
  /**
   * @Title: firstLetterInChinese
   * @Description: 获取字符串第一个中文汉字，拼音首字母
   * @param chinese 汉字
   * @return
   */
  public static String firstLetterInChinese(String chinese) {
    if (chinese == null || StringUtils.isEmpty(chinese)) return chinese;
    for(Map.Entry letter : firstLetterMap.entrySet()) {
      if(chinese.startsWith(letter.getKey())){
        return letter.getValue();
      }
    }
    HanyuPinyinOutputFormat defaultFormat = new HanyuPinyinOutputFormat();
    defaultFormat.setCaseType(HanyuPinyinCaseType.UPPERCASE);
    defaultFormat.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
    char chzr = chinese.trim().toCharArray()[0];
    if (chzr > 128) {
      try {
        String[] temp = PinyinHelper.toHanyuPinyinStringArray(chzr, defaultFormat);
        if (temp != null) {
          return "" + temp[0].charAt(0);
        }
      } catch (BadHanyuPinyinOutputFormatCombination e) {
        e.printStackTrace();
      }
    }
    return "" + chzr;
  }
  
  public static List> cityListCh(List> citys) {
    if (null == citys) return null;
    List> rFconfigLists = Lists.newArrayList();
    Map map = null;
    for (Map city : citys) {
      map = Maps.newHashMap();
      map.put("fconfigid", city.get("FCONFIGID"));
      map.put("cityname",  city.get("CITYNAME"));
      map.put("ch", firstLetterInChinese(""+((null!=city.get("CSJX"))?city.get("CSJX"):city.get("CITYNAME"))));
      rFconfigLists.add(map);
    }
    Collections.sort(rFconfigLists, new Comparator>() {
      public int compare(Map o1, Map o2) {
        return o1.get("ch").toString().compareTo(o2.get("ch").toString());
      }
    });
    return rFconfigLists;
  }
}

 

 

 

 

 

 

 

 

 

 

 

 

• 
• 大小: 25.3 KB

• flcheckbox.zip (8.2 KB)
• 下载次数: 1

• 查看图片附件