jeecg中实现区域（地区）组件

最新推荐文章于 2025-06-27 09:07:19 发布

我吃西红柿11

最新推荐文章于 2025-06-27 09:07:19 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： jeecg 文章标签： jeecg 区域树 java

本文链接：https://blog.youkuaiyun.com/qq_21223653/article/details/51506742

jeecg 专栏收录该内容

2 篇文章

订阅专栏

今天用到了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>

营业地址:

</label>

</td>

</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”

在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);