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

  今天用到了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，这样就能查到山东省下面所有的城市了；