Distpicker主要用来进行表单的省市区三级联动。
Git:https://github.com/fengyuanchen/distpicker
演示:http://www.jq22.com/yanshi8054
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/distpicker.js"></script>
distpicker依赖于jquery,所以必须添加
<div id="distpicker" data-province="${回显省}" data-city="${回显市}" data-district="${回显区}">
<select></select>
<select></select>
<select></select>
</div>
可根据需要添加id等属性,在对应区域填写回显内容即可回显后台数据
$("#distpicker").distpicker();
在distpicker.js中可以设定默认参数对控件进行调整
var DEFAULTS = {
// 是否当省改变时自动选择市和区.
// 0 -> 关闭自动选择
// 1 -> 只自动选择省
// 2 -> 自动选择省和市
// 3 -> 自动选择省和市和区
autoselect: 0,
// 是否显示占位文本.
placeholder: true,
// 设置选择的值,可以选'name'或者'code'
valueType: 'name',
// 定义省份的初始值.
province: '---- 选择省 ----',
// 定义市的初始值.
city: '---- 选择市 ----',
// 定义区的初始值.
district: '---- 选择区 ----'
};
由于Distpicker数据是在js里面固定的,如果需要使用后台的数据,需要对查询到的数据进行转换成JSON才能使用
public class TestJson {
public static void main(String[] args) {
List<HashMap> arealist = new ArrayList<>();
HashMap<String, String> hm1 = new HashMap<>();
hm1.put("CODE", "520000");
hm1.put("NAME", "贵州省");
hm1.put("REGION_LEVEL", "2");
hm1.put("PARENT_NAME", "");
hm1.put("PARENT_CODE", "");
arealist.add(hm1);
HashMap<String, String> hm2 = new HashMap<>();
hm2.put("CODE", "230900");
hm2.put("NAME", "七台河市");
hm2.put("REGION_LEVEL", "3");
hm2.put("PARENT_NAME", "黑龙江省");
hm2.put("PARENT_CODE", "230000");
arealist.add(hm2);
HashMap<String, String> hm3 = new HashMap<>();
hm3.put("CODE", "232700");
hm3.put("NAME", "大兴安岭地区");
hm3.put("REGION_LEVEL", "3");
hm3.put("PARENT_NAME", "黑龙江省");
hm3.put("PARENT_CODE", "230000");
arealist.add(hm3);
HashMap<String, HashMap> areares = new HashMap<>();
for (HashMap area : arealist) {
//获取存入DISTRICTS的Map
HashMap tmp = new HashMap<String, String>();
tmp.put(area.get("CODE"), area.get("NAME"));
if (area.get("REGION_LEVEL").toString().equals("2")) { //当属于第一级时
area.put("PARENT_CODE","100000");
}
if (areares.containsKey(area.get("PARENT_CODE"))) {
areares.get(area.get("PARENT_CODE")).put(area.get("CODE"), area.get("NAME"));
} else {
areares.put((String)area.get("PARENT_CODE"), tmp);
}
JSONObject DISTRICTS = JSONObject.fromObject(areares);
System.out.println(DISTRICTS);
}
}
转换结果: