选择城市组件(多选)

最新推荐文章于 2024-09-08 13:55:34 发布

最后一把钥匙

最新推荐文章于 2024-09-08 13:55:34 发布

阅读量1.8k

点赞数

文章标签：前端 java javascript ViewUI

本文链接：https://blog.csdn.net/tjy_86/article/details/84907995

版权

本文介绍如何在前端实现一个选择城市组件的多选功能，包括在页面中引入CSS和JS文件，指定输入框，以及对城市列表按首字母拼音排序的数据源处理。

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

效果：

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

<link href="${staticPath}/resources/js/flcheckbox/css/powerFloat.css" rel="stylesheet" type="text/css" />
<link href="${staticPath}/resources/js/flcheckbox/css/fl-checkbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="${staticPath}/resources/js/flcheckbox/jquery-powerFloat-min.js"></script>
<script type="text/javascript" language="javascript" src="${staticPath}/resources/js/flcheckbox/jquery-fl-checkbox.js"></script>

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、输入框：

    <input type="text" id="city" value="" readonly="readonly" style="width:390px;text-overflow:ellipsis;"/>
	<input type="button" id="choose_city" value="选择" />
	<div id="fl-ckb-city" class="fl-ckb" style="display: none;">
		<!--数据选项区-->
		<div class="fl-ckb-items">
			<c:set var="ch" value="" />
			<table width="100%">
				<c:forEach items="${cityListCh}" var="o" varStatus="n">
					<c:if test="${o.ch ne ch}">
						<c:if test="${ch ne ''}">
							</ul></td></tr>
						</c:if>
						<tr>
						<td valign="top">
							<font style="padding-left:15px;font-size: 22px;font-weight: bold;">${o.ch}</font>
						</td><td><ul>
					</c:if>
					<li>
						<input type="checkbox" value="${o.fconfigid }" name="fconfigid" />
						<label title="${o.cityname}">${fn:replace(o.cityname,'市','')}</label>
					</li>
					<c:set var="ch" value="${o.ch}" />
				</c:forEach>
				</ul></td></tr>
			</table>
		</div>
	</div>

4、数据源“cityListCh”：

//[{fconfigid=69288840, ch=a, cityname=安庆市}, {fconfigid=226719382, ch=a, cityname=安顺市}, {fconfigid=166004284, ch=a, cityname=鞍山市}]
List<Map<String, Object>> 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<String,String> 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<String, String> 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<Map<String, Object>> cityListCh(List<Map<String, Object>> citys) {
    if (null == citys) return null;
    List<Map<String, Object>> rFconfigLists = Lists.newArrayList();
    Map<String, Object> map = null;
    for (Map<String, Object> 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<Map<String, Object>>() {
      public int compare(Map<String, Object> o1, Map<String, Object> o2) {
        return o1.get("ch").toString().compareTo(o2.get("ch").toString());
      }
    });
    return rFconfigLists;
  }
}