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.總結
基本上的實現思路就是如此,數據庫設計因人而異,有些細節可能大家的不一樣,調整一下即可。