选择城市组件(多选)
效果:
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; } }
相关推荐
NARUTOLUOLUO 2020-08-03
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18