级联查询之前后端

1、级联查询用的最多的是地图查询，而地图中的地名相对来说是固定的，可以用js直接写死，在前端调用，不需要任何后台的操作。

这个例子中需要的是定义好js

<script src="jquery-1[1].2.6.js" type="text/javascript"></script>
<script src="province.js" type="text/javascript"></script>
<script src="allcitydata.js" type="text/javascript"></script>
<script>
    //调用插件
    $(function(){
        $("#test").ProvinceCity();
    });
</script>
<div id="test">
    <select id="name1"></select>
    <select id="name2"></select>
    <select id="name3"></select>
</div>

引入对应的js后，就可以作为一个静态的级联查询了。

2、另一种也是实际生场中常用的，就是需要经过后台，比如查询的时候多个筛选条件，每选择一个条件，下一个选择框则生成该条件下对应的其他选项，类似于树。

前端处理

<div class="col-sm-6">

//onchange()方法，select内的值变化后触发
    <select id="Name1" name="name1" class="form-control"οnchange="findname2Byname1()">
    </select>
</div>
<div class="col-sm-6">
    <select id="name2" name="name2" class="form-control">
  </select>
</div>

<script>
var varTable = null;
function findname2Byname1(){
var name1 =$("#name1").val();//获取name1的id值
$("#name2").html("");
$.ajax({
type: "POST",
cache: false,
url:  "/web/getname2Byname1/" + name1  ,  //通过ajax去数据库取得该表id为name1的时候的name2的id数据，根据该id去name2中查询处name2的值，并返回
dataType: "json",
success: function (data) {
var name2Data = data.aaData;
$("#name2 ").empty();
$("#name2 ").append("<option value=''>"+"全部"+"</option>");
if(name2Data !=null){
for(var i =0;i<name2Data .length;i++){//循环遍历，将name2的id和值添加到select中
$("#name2 ").append("<option value='"+name2Data [i].name2Id+"'>"+name2Data [i].name2+"</option>");
}
varTable.fnDraw();//我的demo中使用的是datatable这个表格插件，这个方法就是自动刷新页面
}
},
error: function (xhr, ajaxOptions, thrownError) {
console.log("数据出错");
}
});
}
</script>

后端接收

@RequestMapping("/getname2Byname1/{id}")
    @ResponseBody
    public Map getname2Byname1(@PathVariable final Integer id, HttpServletRequest request, HttpServletResponse response, Model model) throws BizException {
//Controller层，请求转发到service中做处理
 XXservice.getname2Byname1 (id,map);
}

 在service层的处理主要是根据数据库的结构，我在设计数据库的时候，在该数据表中存的是name1和name2的id，所以当我根据nameId查询到对应的name2Id时，还需要根据name2Id去Name2对应的数据库中取得name2的值，返回前端展示，如果在数据库中又存id也存值得话，就没有这么麻烦了。

public List<Name2> getname2Byname1 (int nameId, Map<String, Object> map) throws BizException {
     List<Datademo> name2IdList;
//根据nameId，向数据后台取得在nameId下的name2Id的list集合
     name2IdList = datademoDao.getName2byId(nameId);
//然后将list中的name2 id取出,并根据id去name2相应的数据库表中取得name2的值
    List list = new ArrayList();
    for(int i = 0;i<name2IdList .size();i++){
        list.add(name2IdList .get(i).getname2Id());
    }
    List <Name2> name2List = name2Dao.getname2ByIdList(list);
    map.put("aaData", name2List  );
    return name2List  ;
} 

//在dao层，通过实现mapper接口重写方法
public List<DataDemo> getName2byId (Integer nameId ) {
@Override
    return getMapperByType(DataDemoMapper.class).getName2byId (nameId );
}