先声明, 所有素材是从ydUI扒下来的, 抄袭可耻,尊重原著 这里放 官网
点击 四级地址演示: 四级地址演示 http://www.jq22.com/yanshi18668
三级地址演示 http://www.ydui.org/cityselect
-----------------我这里只有四级地址的, 三级地址的需要自己去分析JSON数据,然后-----------------------------------
开始:
这是需要的JS文件 这里直接F12 这个地址
http://www.jq22.com/yanshi18668
将上述JS和 CSS文件复制到你的项目中
还有一个jquery.min.js 自行下载 或者直接引用 http://www.jq22.com/jquery-info122
将上述文件存储到本地
html代码
<div class="m-cell">
<div class="cell-item">
<div class="cell-left">所在地区:</div>
<div class="cell-right cell-arrow">
<input type="text" class="cell-input" readonly id="J_Address" value="" placeholder="请选择收货地址">
</div>
</div>
</div>
启动JS代码
!function () {
var $target = $('#J_Address');
$target.citySelect();
$target.on('click', function (event) {
event.stopPropagation();
$target.citySelect('open');
});
$target.on('done.ydui.cityselect', function (ret) {
console.log(ret)
console.log(ret.id);
$(this).val(ret.country + ' ' + ret.provance + ' ' + ret.city + ' ' + ret.area);
});
}();
获取四级Json数据 地址的JAVA代码
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Map;
class AAA{
public String getJsonData(Long platformId) {
String json = "";
// 查询所有省
List<Map<String, Object>> jsonList = new ArrayList<>();
// 获取一地地址
List<BaseAddress> provList = baseAddressMapper.queryChildByCode("0");
for (BaseAddress provice : provList) {
JSONObject prov = new JSONObject();
prov.put("CountryId", provice.getCode());
prov.put("CountryName", provice.getName());
// 获取二级地址
List<BaseAddress> cityList = baseAddressMapper.queryChildByCode(provice.getCode());
List<Map<String, Object>> cityListJson = new ArrayList<>();
for (BaseAddress c : cityList) {
JSONObject city = new JSONObject();
city.put("ProvinceId", c.getCode());
city.put("ProvinceName", c.getName());
// 获取三级地址
List<BaseAddress> countyList = baseAddressMapper.queryChildByCode(c.getCode());
List<Map<String, Object>> countyListJson = new ArrayList<>();
for (BaseAddress coun : countyList) {
JSONObject county = new JSONObject();
county.put("CityId", coun.getCode());
county.put("CityName", coun.getName());
// 获取四级地址
List<BaseAddress> townList = baseAddressMapper.queryChildByCode(coun.getCode());
List<Map<String, Object>> townListJson = new ArrayList<>();
for (BaseAddress t : townList) {
JSONObject town = new JSONObject();
town.put("CountyId", t.getCode());
town.put("CountyName", t.getName());
townListJson.add(town);
}
county.put("CountyList", townListJson);
countyListJson.add(county);
}
city.put("City", countyListJson);
cityListJson.add(city);
}
prov.put("Province", cityListJson);
jsonList.add(prov);
}
return JSONArray.toJSONString(jsonList);
}
}
说明下关键字段 和查询的sql和 实体类
sql是按照 父Id查询的List,
select * from address where parentCode=?
返回字段 主要包含两个,
一个是name( provice.getName())
一个是 自身的id(provice.getCode()))
贴下实体类吧
public class BaseAddress implements Serializable {
private Long id;
private String code;
private String parentCode;
private String name;
/*省略getset*
/
}
===================发现按照操作也挺费劲的, 我还是自己打包了一份, ===========
===========有积分的还是自行下载吧 ,没有积分的评论留邮箱, 我单独发=========================