今天用到了jeecg中的区域树的问题现在做一下笔记,以备日后用到:
首先我们先看一下要实现的效果:
就是实现三级联动查询:
首先,我们在数据库中建一张区域树表:qryAreaCityInfo
如图所示:
主要用的到字段就是pid (父节点的id) level(层级);因为地址的选择是一个三级联动关系;
对应的实体类:
@Entity
@Table(name = "ebm_base_area", schema = "")
@SuppressWarnings("serial")
public class EbmBaseAreaEntity implements java.io.Serializable {
/**行政代码*/
private java.lang.String id;
/**上级代码*/
@Excel(name="上级代码")
private java.lang.String pid;
/**行政类型*/
@Excel(name="行政类型")
private java.lang.String type;
/**名称*/
@Excel(name="名称")
private java.lang.String name;
/**级别*/
@Excel(name="级别")
private java.lang.String level;
然后找到我们需要的jsp页面:
<tr>
<td align="right">
<label class="Validform_label">
营业地址:
</label>
</td>
<td class="value" colspan="3">
<select id="province" name="province" onchange="changeArea('2',this.value)" datatype="*"></select>
<select id="city" name="city" onchange="changeArea('3',this.value)" datatype="*"></select>
<select id="area" name="area" datatype="*"></select>
<span class="Validform_checktip"></span>
<label class="Validform_label" style="display: none;">营业地址</label>
</td>
</tr>
对应的js的写法:
首先,要对当前的联动下拉框进行页面的初始化,默认是 山东省,济南市
在ready方法当中写入:
$(function () {
//初始化省(默认山东省)
changeArea("1","中华人民共和国","山东省");
//初始化市(默认为烟台市)
changeArea("2","山东省","烟台市");
});
//初始化省份
function changeArea(level,pid,selectId){
if(level=="1"){
$("#province").html("");
}else if(level=="2"){
$("#city").html("");
}else if(level=="3"){
$("#area").html("");
}
$.ajax(
{
type: "post",
url: "ebmBaseAreaController.do?qryAreaCityInfo",
data: { "level": level,"pid":pid},
success: function (msg) {
var result = $.parseJSON(msg);
for (var i = 0; i < result.obj.length; i++) {
if(level=="1"){
$("#province").append("<option value=" + result.obj[i].name + ">" + result.obj[i].name + "</option>");
}else if(level=="2"){
$("#city").append("<option value=" + result.obj[i].name + ">" + result.obj[i].name + "</option>");
}else if(level=="3"){
$("#area").append("<option value=" + result.obj[i].name + ">" + result.obj[i].name + "</option>");
}
}
if(level=="1"){
if(selectId != null){
$("#province option[value='"+selectId+"']").attr("selected", true);
}
}else if(level=="2"){
if(selectId != null){
$("#city option[value='"+selectId+"']").attr("selected", true);
changeArea("3",selectId);
}else{
changeArea("3",result.obj[0].name);
}
}else if(level=="3"){
if(selectId != null){
$("#area option[value='"+selectId+"']").attr("selected", true);
}
}
}
});
}
对应ajax中的方法:
/**
* 获取某一级区域列表
*
* @return
*/
@RequestMapping(params = "qryAreaCityInfo")
@ResponseBody
public AjaxJson qryAreaCityInfo(EbmBaseAreaEntity ebmBaseArea, HttpServletRequest request) {
AjaxJson j = new AjaxJson();
try {
if (!StringUtils.isEmpty(ebmBaseArea.getPid())) {
EbmBaseAreaEntity baseArea = systemService.findUniqueByProperty(EbmBaseAreaEntity.class, "name", ebmBaseArea.getPid());
List<String> parmList = new ArrayList<String>();
parmList.add(ebmBaseArea.getLevel());
parmList.add(baseArea.getId());
List<Map<String, Object>> qryList = systemService.findForJdbc("select * from ebm_base_area t where t.level = ? and t.pid = ? ", parmList.toArray());
j.setObj(qryList);
}
} catch (Exception e) {
e.printStackTrace();
throw new BusinessException(e.getMessage());
}
return j;
}
这样,在页面通过jquery中初始化方法时;会向后台传递三个请求:
在 }else if(level=="3"){
if(selectId != null){
$("#area option[value='"+selectId+"']").attr("selected", true);
}
这段代码中,也可以指定一下区县:
if (selectId == null) {
$("#county option[value='福山区']").attr("selected", true);
}
这样就实现了在新增页面的时候,正常使用区域的选择了;
在修改页面的时候,我们只需要在页面中三个input隐藏域,然后再js中获取,对应的指定selected=“selected”
<td align="right"><label class="Validform_label">
联系地址:
</label>
</td>
<td class="value" >
<select id="province" name="province" οnchange="changeArea('2',this.value)" style="width: 80px"
></select>省
<input id="value1" name="value1" type="hidden" value='${actUserPage.province}' >
<select id="city" name="city" οnchange="changeArea('3',this.value)" style="width: 80px"
></select>市
<input id="value2" name="value2" type="hidden" value='${actUserPage.city}'>
<select id="county" name="county" style="width: 80px" ></select>区县
<input id="value3" name="value3" type="hidden" value='${actUserPage.county}'>
<label class="Validform_label" style="display: none;">联系地址</label>
</td>
在js初始化时这样写:
var value1 = document.getElementById("value1").value;
// $("#contactProvince option[value='"+value1+"']").attr("selected",true);
var value2 = document.getElementById("value2").value;
//$("#contactCity option[value='"+value2+"']").attr("selected",true);
//alert(value2);
var value3 = document.getElementById("value3").value;
$("#county option[value='"+value3+"']").attr("selected",true);
//初始化省(默认山东省)
changeArea("1","中华人民共和国",value1);
changeArea("2",value1,value2);
如此就能够实现:
需要理解注意的是,区域树qryAreaCityInfo中pid是字符类型,我们在用的时候是不断给它值,在jsp是“山东省”,我们先找到name为“山东省”的实体类,然后获得它的id作为接下来查询的pid,这样就能查到山东省下面所有的城市了;