关于读取数据库实现三级联动

该框架主要还是使用spring Mvc + Data jpa

Model层

@Entity
@Data
@Table(name = "c_type_list")
@AllArgsConstructor
@NoArgsConstructor
public class Result {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id", unique = true, nullable = false)
    private Integer id;

    @Column
    private Integer pid;

    @Column
    private String name;

}

对于jpa可以在Repositorty层加@Query注解可实现直接读数据库获取想要的数据

Repository层

public interface LinkAgeRepository extends JpaRepository<Result, String>, JpaSpecificationExecutor<Result> {

    @Query(value = "select id,name from c_type_list where pid=0", nativeQuery = true)
    List<Map<String, Object>> getAllRegion();


    @Query(value = "select id,name from c_type_list where pid=?", nativeQuery = true)
    List<Map<String, Object>> getAllCitys(Integer id);


    @Query(value = "select id,name from c_type_list where pid=? and name <> '' ", nativeQuery = true)
    List<Map<String, Object>> getAreaByCityId(Integer id);
}

Controller层

将读取的第二级、第三级的数据转成json类型

@Controller
@RequestMapping("/linkage")
public class LinkController {

    @Autowired
    private LinkAgeRepository linkAgeRepository;

    @RequestMapping("/addAddress")
    public String addAddress(Model model) {
        //查出所有省份
        List<Map<String, Object>> provinceList = linkAgeRepository.getAllRegion();
        model.addAttribute("provinceList", provinceList);
        return "sysAdmin/linkage/list";
    }

    @RequestMapping("/getCityByProvinceId/{id}")
    @ResponseBody
    public String getCityByProvinceId(@PathVariable Integer id) {
        //根据省份id查询城市
        List<Map<String, Object>> cityList = linkAgeRepository.getAllCitys(id);
        String json = JSON.toJSONString(cityList);
        return json;
    }

    @RequestMapping("/getAreaByCityId/{id}")
    @ResponseBody
    public String getAreaByCityId(@PathVariable Integer id) {
        //根据城市id查询地区
        List<Map<String, Object>> areaList = linkAgeRepository.getAreaByCityId(id);

        String json = JSON.toJSONString(areaList);
        return json;
    }
}

前端

这里是借鉴网上的地区三级联动的例子自己做了些改动
1.通过第一级pid为0,可直接获取第一级的数据
2.通过ajax的特性将第一级的id传到后台可获取第二级的数据
3.同理2，可获取第三级数据
4.这里使用了οnchange=“getCity(this.options[this.options.selectedIndex].value)” 当select改变时，回传递当前的值【也就是id】,从而实现监听联动的效果

<div class="page-content">
        <div class="list-search">
            <form th:action="@{/bzzd/bzzdListUI}" method="POST" id="addAddressForm">
                <div class="myDtl_cnt_list">
                    <div class="g-line g-clear">
                        <div class="fr">
                            <label>
                                <select id="province2" style="line-height:4rem;height:2rem;width:15rem;border:none;"
                                        name="provinceId"
                                        onchange="getCity(this.options[this.options.selectedIndex].value)">
                                    <option value="">选择等级1option>
                                    <option th:each="items:${provinceList}"
                                            th:value="${items.id}" th:text="${items.name }">option>
                                select>


                                <select style="line-height:4rem;height:2rem;width:15rem;border:none;" id="city2"
                                        name="cityId"
                                        onchange="getArea(this.options[this.options.selectedIndex].value)">>
                                    <option value="">选择等级2option>

                                select>


                                <select style="line-height:4rem;height:2rem;width:20rem;border:none;" id="area2"
                                        name="areaId">
                                    <option value="">选择等级3option>

                                select>

                            label>
                        div>
                    div>

                div>
            form>
        div>
    div>
    <script th:inline="javascript">

        $("#addAddress").click(function () {
            $("#addAddressForm").submit();
        })
        

        function getCity(id) {
            if (!id){
                $("#city2").empty(); //清空下拉列表
                $("#city2").append(" " + "选择等级2" + "");//增加城市的数据
                $("#area2").empty(); //清空下拉列表
                $("#area2").append(" " + "选择等级3" + "");//增加城市的数据

                return;
            }
            $.ajax({
                url: "/linkage/getCityByProvinceId/" + id,
                type: "GET",
                success: function (data) {
                    $("#city2").empty(); //清空下拉列表
                    var json = $.parseJSON(data);
                    $.each(json, function (i, json) {　　//$.parseJSON用于格式化json数据
                        $("#city2").append(" " + json.name + "");//增加城市的数据
                    });
                    getArea(json[0].id);
                }
            });
        }

        function getArea(id) {
            
            $.ajax({
                url: "/linkage/getAreaByCityId/" + id,
                type: "GET",
                success: function (data) {
                    $("#area2").empty(); //清空下拉列表
                    $.each($.parseJSON(data), function (i, item) {
                        $("#area2").append(" " + item.name + "");//增加区域的数据
                    });
                }
            });

        }
    script>

数据库

效果