springboot查詢數據庫,js實現二級聯動效果


1.數據庫設計

 實現oracle,mysql不同數據庫鏈接不同的數據類型

2.在跳轉到添加頁面的時候,去數據庫查詢parent_id=0的數據,存入modelMap中帶入add.html頁面

@GetMapping("/add")
public String add(ModelMap mmap) { //查詢數據庫類型,返回oracle和mysql等數據庫 List<DatabaseVo> databaseVo = matedataService.selectDatabases(); mmap.addAttribute("databases",databaseVo);return "/add";
}

返回的數據使用自定義DatabaseVo來接收;

public class DatabaseVo implements Serializable {
    private static final long serialVersionUID = 1L; //編號 private Long id; //數據庫名稱 private String name;
}

3.跳轉到add.html頁面

<div class="form-group">
    <label class="col-sm-3 control-label">數據庫類型:</label>
        <div class="col-sm-8">
             <select class="form-control m-b" id="database" th:name="databaseId">
                  <option value="">請選擇數據庫</option>
                  <option th:each="database : ${databases}" th:value="${database.id}" th:text="${database.name}"></option>
             </select>
      </div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">數據項類型:</label>
<div class="col-sm-8">
<select name="type" id="types" class="form-control m-b" >

</select>
 </div>
</div>

4.js二級聯動代碼實現

    $("#database").change(function () {
        var databaseId = $("#database").val(); if (databaseId == null) { return; } $.ajax({ cache: true, type: "get", url: prefix + "/getTypeByDataBaseId", data: {"databaseId": databaseId}, success: function (data) { console.log(data); var types = $("#types").empty(); for (var i = 0; i < data.data.length; i++) { types.append("<option value = '"+ data.data[i].name + "'>" + data.data[i].name + "</option>"); } } }) })

5.根據數據庫id去查詢旗下的數據類型,返回的數據跟數據庫一致

    @GetMapping("/getTypeByDataBaseId")
    @ResponseBody
    public AjaxResult getTypeByDataBaseId (@RequestParam("databaseId") Long id) { //根據數據庫Id查詢對應的數據類型 List<TypeVo> typeVo = matedataService.selectTypesByDatabaseId(id); if (typeVo == null) { throw new RuntimeException("數據為空!"); } return AjaxResult.success(typeVo); }

6.實現效果

 

======================================================================================

 

======================================================================================

7.總結

基本上的實現思路就是如此,數據庫設計因人而異,有些細節可能大家的不一樣,調整一下即可。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM